本文共 2821 字，大约阅读时间需要 9 分钟。

react-native-gesture-password

一个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 (            
   
     this.onStart()}                onEnd={(password) => this.onEnd(password)}                />        );    }});AppRegistry.registerComponent('AppDemo', () => AppDemo);
   

转载地址：http://pyeni.baihongyu.com/