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

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

效果图

安装

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 passwordonEnd: 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 passwordPassword1 = password;this.setState({status: 'normal',message: 'Please input your password secondly.'});} else {// The second passwordif ( 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 (<PasswordGestureref='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/rea...

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