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