React Native手势密码组件

本文原创首发于公众号: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 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.'
        });
    },onReset: function() {
        this.setState({
            status: 'normal',message: 'Please input your password (again).'
        });
    },// 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);

组件地址

详细说明和示例代码请查看GitHub:https://github.com/Spikef/rea...

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

相关文章

导入moment 使用方式 年月日,时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理...
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段,在React的整个生命周期中提供很...
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用...
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ....