ReactNativeでPINコード画面

RNでPINコード画面をとりあえず、見た目だけ。

デザインがシンプルでよかったので、react-native-pincodeを使いました。

インストール

npm install --save @haskkor/react-native-pincode

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PINCode from '@haskkor/react-native-pincode';


export default class App extends React.Component {
  render() {
    return (
        <PINCode status={'choose'}/>
    );
  }
}

一応これだけで、見た目は動きます。

使い方

このnpmでは３つの使い方ができる。

choose

ユーザーがPINを入力して再度PINを入力して確認する
パスワード設定とかでよくある二重確認の機能

enter

指定したPINを入力して承認する
ロック機能をつけたアプリのログイン画面みたいな機能

locked

PINを何度も間違えたときに一定時間ロックされた画面を表示させる

オプション

パスワードの文字数の変更

App.js

export default class App extends React.Component {
  render() {
    return (
        <PINCode 
          status={'choose'}
+         passwordLength='5'
        />
    );
  }
}

タイトルの変更

※choose画面のタイトル変更のみ

App.js

export default class App extends React.Component {
  render() {
    return (
        <PINCode 
          status={'choose'}
+         titleChoose='メインタイトル'
+         subtitleChoose='サブタイトル'
        />
    );
  }
}

以上。随時更新します。