国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

React Native手勢(shì)密碼組件

Java3y / 3045人閱讀

摘要：效果圖安裝屬性所有的屬性都是可選的。現(xiàn)在列舉幾個(gè)重要屬性。狀態(tài)為驗(yàn)證手勢(shì)密碼是否準(zhǔn)確是需要自己在事件中來(lái)判斷的。當(dāng)用戶(hù)結(jié)束輸入手勢(shì)密碼時(shí)觸發(fā)。

本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開(kāi)發(fā)圈，轉(zhuǎn)載需注明出處。

這次介紹的React Native手勢(shì)密碼組件為react-native-gesture-password，純JavaScript實(shí)現(xiàn)，同時(shí)支持iOS和安卓平臺(tái)。
效果圖

安裝

npm install react-native-gesture-password --save

屬性

所有的屬性都是可選的。現(xiàn)在列舉幾個(gè)重要屬性。

message (string)

給用戶(hù)的提示信息，如請(qǐng)輸入手勢(shì)密碼，手勢(shì)密碼不準(zhǔn)確等此類(lèi)消息。

status (string)

狀態(tài)為："normal", "right" or "wrong’.驗(yàn)證手勢(shì)密碼是否準(zhǔn)確是需要自己在onEnd事件中來(lái)判斷的。

onStart (function)

當(dāng)用戶(hù)開(kāi)始輸入手勢(shì)密碼時(shí)觸發(fā)。

onEnd (function)

當(dāng)用戶(hù)結(jié)束輸入手勢(shì)密碼時(shí)觸發(fā)。

示例 
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);
組件地址

詳細(xì)說(shuō)明和示例代碼請(qǐng)查看GitHub：https://github.com/Spikef/rea...

舉手之勞關(guān)注我的微信公眾號(hào)：ReactNative開(kāi)發(fā)圈

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/89762.html

相關(guān)文章

  • 翻譯 | 從 ReactJS 到 React-Native—兩者的主要差異是什么？

    摘要：跟非常相似，但是在開(kāi)始嘗試你第一個(gè)之前，也需要了解兩者之間的一些差異。推薦的方式是使用提供的。能用到組件中的或者上以啟用這個(gè)組件的觸摸事件。 華翔，Web前端開(kāi)發(fā)工程師著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已經(jīng)誕生有兩年左右了，自從適配了An...

    darkerXi 評(píng)論0 收藏0

  • React Native 在 Airbnb(譯文)

    摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導(dǎo)致或上出現(xiàn)不一致或意外錯(cuò)誤。崩潰監(jiān)控我們使用在和上進(jìn)行崩潰報(bào)告。橋接有一個(gè)橋接，用于在本機(jī)和之間進(jìn)行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺(tái)框架的橫向?qū)Ρ戎校琑eact Nativ...

    nihao 評(píng)論0 收藏0

  • React Native 在 Airbnb(譯文)

    摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導(dǎo)致或上出現(xiàn)不一致或意外錯(cuò)誤。崩潰監(jiān)控我們使用在和上進(jìn)行崩潰報(bào)告。橋接有一個(gè)橋接，用于在本機(jī)和之間進(jìn)行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺(tái)框架的橫向?qū)Ρ戎校琑eact Nativ...

    chenatu 評(píng)論0 收藏0

  • React Native 在 Airbnb(譯文)

    摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導(dǎo)致或上出現(xiàn)不一致或意外錯(cuò)誤。崩潰監(jiān)控我們使用在和上進(jìn)行崩潰報(bào)告。橋接有一個(gè)橋接，用于在本機(jī)和之間進(jìn)行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺(tái)框架的橫向?qū)Ρ戎校琑eact Nativ...

    icyfire 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<