Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@kana-t

ReactNativeでPINコード画面

More than 1 year has passed since last update.

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

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

37805052-bdefa610-2e9c-11e8-8290-fe2d695020a5.gif

インストール

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では3つの使い方ができる。
スクリーンショット 2018-12-05 15.00.39.png

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='サブタイトル'
        />
    );
  }
}

スクリーンショット 2018-12-05 15.14.38.png

以上。随時更新します。

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?