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



  • react-native-gesture-password

    github地址

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

    0_1451992352947_screenshot.gif

    安装

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

    Notes

    This old version(<0.1.0) is at the branch native. I won't update that unless fix bugs.

    If you have suggestions or bug reports, feel free to send pull request or create new issue.



  • 非常漂亮! :smile:



  • 这个,确实不错!



  • 刚才试了一下,在iphone5s上真机调试,性能很慢。楼主有遇到这个问题吗?



  • awesome!



  • @guyunxiang 请尝试新的版本@v1.0.2。



  • 更新支持v0.25+