React Native手势密码组件

本文原创首发于公众号：ReactNative开发圈，转载需注明出处。

这次介绍的React Native手势密码组件为react-native-gesture-password，纯JavaScript实现，同时支持iOS和安卓平台。

效果图

image.png

安装

npm install react-native-gesture-password --save

属性

所有的属性都是可选的。现在列举几个重要属性。

message (string)

给用户的提示信息，如请输入手势密码，手势密码不准确等此类消息。

status (string)

状态为：'normal', 'right' or 'wrong’.验证手势密码是否准确是需要自己在onEnd事件中来判断的。

onStart (function)

当用户开始输入手势密码时触发。

onEnd (function)

当用户结束输入手势密码时触发。

示例

var React = require('react');
var {
    AppRegistry,
    } = require('react-native');

var PasswordGesture = require('react-native-gesture-password');

var Password1 = '';
var AppDemo = React.createClass({
    // Example for check password
    onEnd: function(password) {
        if (password == '123') {
            this.setState({
                status: 'right',
                message: 'Password is right, success.'
            });

            // your codes to close this view
        } else {
            this.setState({
                status: 'wrong',
                message: 'Password is wrong, try again.'
            });
        }
    },
    onStart: function() {
        this.setState({
            status: 'normal',
            message: 'Please input your password.'
        });
    },
    onReset: function() {
        this.setState({
            status: 'normal',
            message: 'Please input your password (again).'
        });
    },
    // Example for set password
    /*
    onEnd: function(password) {
        if ( Password1 === '' ) {
            // The first password
            Password1 = password;
            this.setState({
                status: 'normal',
                message: 'Please input your password secondly.'
            });
        } else {
            // The second password
            if ( password === Password1 ) {
                this.setState({
                    status: 'right',
                    message: 'Your password is set to ' + password
                });

                Password1 = '';
                // your codes to close this view
            } else {
                this.setState({
                    status: 'wrong',
                    message:  'Not the same, try again.'
                });
            }
        }
    },
    onStart: function() {
        if ( Password1 === '') {
            this.setState({
                message: 'Please input your password.'
            });
        } else {
            this.setState({
                message: 'Please input your password secondly.'
            });
        }
    },
    */

    getInitialState: function() {
        return {
            message: 'Please input your password.',
            status: 'normal'
        }
    },
    render: function() {
        return (
            <PasswordGesture
                ref='pg'
                status={this.state.status}
                message={this.state.message}
                onStart={() => this.onStart()}
                onEnd={(password) => this.onEnd(password)}
                />
        );
    }
});

AppRegistry.registerComponent('AppDemo', () => AppDemo);

组件地址

详细说明和示例代码请查看GitHub：https://github.com/Spikef/react-native-gesture-password

举手之劳关注我的微信公众号：ReactNative开发圈

image.png