手势密码，纯JavaScript实现，支持iOS和Android

react-native-gesture-password

github地址

一个React Native的手势密码组件，纯JavaScript实现，因此同时支持iOS和安卓平台。

安装

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

属性

所有属性都是可选的。

MESSAGE (STRING)

上方显示的文本内容。

STATUS (STRING)

状态值可以是'normal', 'right' 或者 'wrong'。

密码结果的验证需要手动实现，然后通过设置不同的状态值来表示结果是否正确。

STYLE (STRING)

整个组件的样式，可以通过style来设置默认的背景颜色。

RIGHTCOLOR (STRING)

当status !== 'wrong'时的显示颜色。

WRONGCOLOR (STRING)

当status === 'wrong'时的显示颜色。

INTERVAL (NUMBER)

如果设置了一个大于0的值，那么将在这个时间之后自动重置（单位为毫秒）。

ONSTART (FUNCTION)

当点击一个数字键时触发该事件。

ONEND (FUNCTION)

当松开手指时触发该事件，并以最终的密码作为参数传入。

CHILDREN

可以加入其它子组件（例如你想在上面显示一个头像）。

Examples

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

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.'
        });
    },

    // 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);