ReactNative (Expo)로 Pin 코드 화면 사용

이전에는 보기가 좋다는 이유로 react-native-pincode을 시도했지만 Expo에서는 불행히도 움직이지 않는 것으로 나타났습니다. . .

어쨌든 그물을 보면 react-native-pin-view라는 것이 있었기 때문에 시도했습니다.

결론

react-native-pin-view는 말 그대로 view만으로 pin의 유지 등의 로직은 구현되지 않는다

로직은 스스로 구현해야 한다

할 수있는 것

사용법

설치

npm install --save react-native-pin-view

구현

pin의 입력이 완료되면 onComplete가 불리기 때문에, 거기 여러가지 구현한다.
뭐, 실제로는 취득한 pin을 AsyncStorage등에 보존해 호출하는 느낌이 될까라고・・・

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PinView from 'react-native-pin-view'

export default class App extends React.Component {

    state = {
        pin: '1234'
    }

    onComplete = (inputtedPin,clear) => {
        if(inputtedPin == this.state.pin){
            alert('Pin is correct');
            clear();
        }else{
            clear();
        }
    }

    render() {
        console.log(this.state.pin);
        return (
            <View style={{ flex: 1, justifyContent: 'center', backgroundColor:'#87cefa' }}>
                <PinView
                    pinLength={this.state.pin.length}
                    onComplete={this.onComplete}
                    inputViewStyle={{backgroundColor:"#000"}}
                    inputBgOpacity={0.3}
                />
            </View>
        );
    }
}

뭐, 뒤에서 무엇을 하고 있는지 모르는 것보다, 로직은 스스로 실장하는 편이 깨끗이는 할까. . .
디자인은 react-native-pincode를 모방하면 좋고.