手勢密碼效果圖
場景需求：
手勢密碼解鎖安裝：
npm install react-native-gesture-password --save
或者
yarn add react-native-gesture-password
- 屬性
message （string）
展示給用戶的提示信息樊展。status （string）
狀態(tài)為：normal、rightorwrong，用來驗證手勢密碼是否準確是需要自己在 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
