React Native手勢密碼組件

Java3y 發布于2019-08-21 17:37 / 3055人閱讀

摘要：效果圖安裝屬性所有的屬性都是可選的。現在列舉幾個重要屬性。狀態為驗證手勢密碼是否準確是需要自己在事件中來判斷的。當用戶結束輸入手勢密碼時觸發。

本文原創首發于公眾號：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開發圈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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