資訊專欄INFORMATION COLUMN
摘要：效果圖安裝屬性所有的屬性都是可選的?，F(xiàn)在列舉幾個重要屬性。狀態(tài)為驗證手勢密碼是否準確是需要自己在事件中來判斷的。當用戶結(jié)束輸入手勢密碼時觸發(fā)。
本文原創(chuàng)首發(fā)于公眾號：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處。
效果圖 安裝這次介紹的React Native手勢密碼組件為react-native-gesture-password，純JavaScript實現(xiàn)，同時支持iOS和安卓平臺。
npm install react-native-gesture-password --save
屬性所有的屬性都是可選的?，F(xiàn)在列舉幾個重要屬性。
message (string)給用戶的提示信息，如請輸入手勢密碼，手勢密碼不準確等此類消息。
status (string)狀態(tài)為："normal", "right" or "wrong’.驗證手勢密碼是否準確是需要自己在onEnd事件中來判斷的。
onStart (function)當用戶開始輸入手勢密碼時觸發(fā)。
onEnd (function)當用戶結(jié)束輸入手勢密碼時觸發(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);
組件地址
詳細說明和示例代碼請查看GitHub：https://github.com/Spikef/rea...
舉手之勞關(guān)注我的微信公眾號：ReactNative開發(fā)圈
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89762.html
摘要：跟非常相似，但是在開始嘗試你第一個之前，也需要了解兩者之間的一些差異。推薦的方式是使用提供的。能用到組件中的或者上以啟用這個組件的觸摸事件。 華翔，Web前端開發(fā)工程師著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已經(jīng)誕生有兩年左右了，自從適配了An...
摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導致或上出現(xiàn)不一致或意外錯誤。崩潰監(jiān)控我們使用在和上進行崩潰報告。橋接有一個橋接，用于在本機和之間進行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺框架的橫向?qū)Ρ戎?，React Nativ...
摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導致或上出現(xiàn)不一致或意外錯誤。崩潰監(jiān)控我們使用在和上進行崩潰報告。橋接有一個橋接，用于在本機和之間進行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺框架的橫向?qū)Ρ戎?，React Nativ...
摘要：聲明有助于保持我們的同步與底層狀態(tài)的聲明性質(zhì)。值得注意的是，這些挑戰(zhàn)并非特定于。這導致或上出現(xiàn)不一致或意外錯誤。崩潰監(jiān)控我們使用在和上進行崩潰報告。橋接有一個橋接，用于在本機和之間進行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺框架的橫向?qū)Ρ戎校琑eact Nativ...
閱讀 3466·2019-08-30 15:44
閱讀 808·2019-08-30 13:46
閱讀 2097·2019-08-30 11:05
閱讀 3344·2019-08-29 18:32
閱讀 2165·2019-08-29 13:56
閱讀 1304·2019-08-29 12:57
閱讀 770·2019-08-28 18:21
閱讀 1755·2019-08-26 12:16
