React Native手势密码组件

Java3y 发布于2019-08-21 17:37 / 2854人阅读

摘要：效果图安装属性所有的属性都是可选的。现在列举几个重要属性。状态为验证手势密码是否准确是需要自己在事件中来判断的。当用户结束输入手势密码时触发。

本文原创首发于公众号：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 (
             this.onStart()}
                onEnd={(password) => this.onEnd(password)}
                />
        );
    }
});

AppRegistry.registerComponent("AppDemo", () => AppDemo);

组件地址

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89762.html

翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么？

摘要：跟非常相似，但是在开始尝试你第一个之前，也需要了解两者之间的一些差异。推荐的方式是使用提供的。能用到组件中的或者上以启用这个组件的触摸事件。华翔，Web前端开发工程师著作权归作者所有，转载请联系作者获得授权。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已经诞生有两年左右了，自从适配了An...

darkerXi 2019-08-21 12:05 评论0 收藏0
React Native 在 Airbnb(译文)

摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

nihao 2019-08-22 18:50 评论0 收藏0
React Native 在 Airbnb(译文)

摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

chenatu 2019-08-02 10:57 评论0 收藏0
React Native 在 Airbnb(译文)

摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

icyfire 2019-08-30 15:54 评论0 收藏0