A gesture password component for React Native
一个React Native的手势密码组件
npm install react-native-gesture-password --save
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name], Go to node_modules ➜ react-native-gesture-password and add the RNGesturePassword.xcodeproj
file
In XCode, in the project navigator, select your project. Add the lib*.a from the RNGesturePassword project to your project's Build Phases ➜ Link Binary With Libraries Click RNGesturePassword.xcodeproj
file you added before in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both
Run your project (Cmd+R)
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 == '012') {
this.refs.pg.setNativeProps({
gestureError: false,
inputTipText: 'Password is right, success.'
})
// your codes to close this view
} else {
this.refs.pg.setNativeProps({
gestureError: true,
inputTipText: 'Password is wrong, try again.'
});
}
},
onStart: function() {
this.refs.pg.setNativeProps({
inputDefault: 'Please input your password.'
})
},
/*
// Example for set password
onEnd: function(password) {
if ( Password1 === '' ) {
if (password !== '') {
Password1 = password;
this.refs.pg.setNativeProps({
gestureError: false,
inputDefault: 'Please input your password secondly.'
})
}
} else {
if ( password === Password1 ) {
this.refs.pg.setNativeProps({
gestureError: false,
inputTipText: 'Your password is set to ' + password
});
// your codes to close this view
} else {
this.refs.pg.setNativeProps({
gestureError: true,
inputTipText: 'Not the same, try again.'
})
}
}
},
onStart: function() {
if ( Password1 === '') {
this.refs.pg.setNativeProps({
inputDefault: 'Please input your password.'
})
} else {
this.refs.pg.setNativeProps({
inputDefault: 'Please input your password secondly.'
})
}
},
*/
render: function() {
return (
<PasswordGesture
ref='pg'
inputDefault='Please input your password.'
onStart={() => this.onStart()}
onEnd={(password) => this.onEnd(password)}
/>
);
}
});
AppRegistry.registerComponent('AppDemo', () => AppDemo);
This project is inspired by GesturePasswordView.
If you have suggestions or bug reports, feel free to send pull request or create new issue.