手勢密碼效果圖
場景需求:
手勢密碼解鎖安裝:
npm install react-native-gesture-password --save
或者
yarn add react-native-gesture-password
- 屬性
message (string)
展示給用戶的提示信息樊展。status (string)
狀態(tài)為:normal
、right
orwrong
,用來驗證手勢密碼是否準確是需要自己在 onEnd 事件中來判斷的植酥。normalColor(string)
使用此顏色呈現(xiàn)默認的圓形顏色鸟蟹。rightColor(string)
密碼正確時候的顏色。wrongColor(string)
密碼錯誤時候的顏色。interval(number)
圓圈重置的時間間隔荸恕。allowCross(string)
允許跨越圓圈角寸,默認為 false菩混。onStart(function)
當(dāng)用戶開始輸入的手勢密碼時觸發(fā)。onEnd(function)
當(dāng)用戶結(jié)束輸入手勢密碼時觸發(fā)扁藕。
- 示例:
import {
StyleSheet,
View,
Text,
TextInput,
Alert
} from "react-native";
import PasswordGesture from './gesturePassword/index'
let Password1 = '';
export default class GesturePassword extends BaseComponent {
constructor(props) {
super(props);
this.state = {
message: '請繪制解鎖圖案',
status: 'normal',
timeOut: 300,
}
}
render() {
const {state}=this.props.navigation;
return (
<View>
<NavigationBar rightText="" rightClick={() => {
}}>{state.params.gesturePawText}</NavigationBar>
<PasswordGesture
ref='pg'
status={this.state.status}
message={this.state.message}
onStart={() => this.onStart()}
onEnd={(password) => this.onEnd(password)}
innerCircle={true}
outerCircle={true}
interval={this.state.timeOut}
/>
</View>
)
}
onEnd(password) {
const {timeOut}=this.state;
if (Password1 === '') {
// The first password
Password1 = password;
if (timeOut) {
this.time = setTimeout(() => {
this.setState({
status: 'normal',
message: '請再次繪制解鎖圖案',
});
}, timeOut)
}
} else {
// The second password
if (password === Password1) {
this.setState({
status: 'right',
message: '您的密碼是' + password,
});
Password1 = '';
} else {
this.setState({
status: 'wrong',
message: '密碼錯誤, 請再次輸入.',
});
}
}
}
onStart() {
if (Password1 === '') {
this.setState({
message: '請繪制解鎖圖案',
});
} else {
this.setState({
message: '請再次繪制解鎖圖案',
});
}
if (this.state.timeOut) {
clearTimeout(this.time);
}
}
}
-
設(shè)置密碼
設(shè)置手勢密碼效果圖 -
以上代碼沒啥好說的墨吓,真正有意思的地方在于為了滿足我們自定義的場景(比如:手勢圖的頂部需要加個用戶頭像或者如圖中顯示的第一次設(shè)置密碼后顯示圖),而修改布局的時候纹磺,因為這個手勢圖的位置使用 position 的 absolute 來寫的:
- 第一:圓圈的位置和線的坐標位置必須一一對應(yīng)(否則會出現(xiàn)錯位的現(xiàn)象)帖烘;
- 更改樣式主要在于:
const Top = isVertical ? (Height - Width) / 2.0 * 1.25 + 35 : 10
和const Radius = isVertical ? Width / 10 : Width / 25;
以及circles.push({ isActive: false, x: p * (Radius * 2 + Margin) + Margin + Radius + 30, y: q * (Radius * 2 + Margin) + Margin + Radius + 60 });
- 重置代碼模塊
重置手勢密碼效果圖
重置的流程:
流程圖
- TIP:
1、手勢密碼輸錯 5 次橄杨,不再監(jiān)聽滑動秘症。
2照卦、設(shè)置時的提示樣式,只保留第一次滑動軌跡乡摹,重置后清空
(眼尖的同學(xué)可能看出了兩幅圖樣式不太一致役耕,因為第一幅圖還沒正式開發(fā) ... )
由于篇幅原因,具體想要知道整個效果圖的代碼或者有補充地方的可以加技術(shù)群:631730313