gesture password component,smooth easy and quick
base on react-native-smart-gesture-password More friendly to existing reactive native versions, adding moving callbacks
(修复了偏移的bug，在navigation存在或者statusBar的情况都可以适用，有bug，直接提issue吧)
/*
- 因为刚上手RN不久，解决offset的这个方法并不太高明，有更好的办法请赐教
- 因为这里取了 view 的绝对坐标，因此可能父节点 有动作啥的，这时候取的坐标是不对的
- 这里提供了 recomputeLayout 这个函数，主动刷新，因为只有使用者自己知道动作什么时候结束
- 这个时候刷新一下位置即可,默认delay了300ms，我觉得对于绝大多数view是足够的,也可以自己设置 viewDelay
- this.ref.recomputeLayout () ; */
npm install react-native-ok-gesture-password --save
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Alert} from 'react-native';
import OkGesturePassword from "./source/OkGesturePassword";
type
Props = {};
export default class App extends Component<Props> {
state = {
point1: "#FFFFFF",
point2: "#FFFFFF",
point3: "#FFFFFF",
point4: "#FFFFFF",
point5: "#FFFFFF",
point6: "#FFFFFF",
point7: "#FFFFFF",
point8: "#FFFFFF",
point9: "#FFFFFF",
};
render() {
return (
<View style={styles.container}>
<View style={{height: 70, marginTop: 10}}>
<View style={styles.headContent}>
<View style={[styles.headCircle, {backgroundColor: this.state.point1}]}/>
<View style={[styles.headCircle, {backgroundColor: this.state.point2}]}/>
<View style={[styles.headCircle, {backgroundColor: this.state.point3}]}/>
</View>
<View style={styles.headContent}>
<View style={[styles.headCircle, {backgroundColor: this.state.point4}]}/>
<View style={[styles.headCircle, {backgroundColor: this.state.point5}]}/>
<View style={[styles.headCircle, {backgroundColor: this.state.point6}]}/>
</View>
<View style={styles.headContent}>
<View style={[styles.headCircle, {backgroundColor: this.state.point7}]}/>
<View style={[styles.headCircle, {backgroundColor: this.state.point8}]}/>
<View style={[styles.headCircle, {backgroundColor: this.state.point9}]}/>
</View>
</View>
<OkGesturePassword
style={styles.gesturePassword}
pointBackgroundColor={'white'}
showArrow={false}
color={'#1F67B9'}
activeColor={'#1F67B9'}
warningColor={'red'}
warningDuration={0}
allowCross={false}
onMove={(p) => {
console.log("onMove:" + p);
this._changeHeadPoint(p);
}}
onFinish={(password) => {
Alert.alert("密码",password);
this._resetHeadPoint();
}}
/>
</View>
);
}
_resetHeadPoint = () => {
this.setState({
point1: "#FFFFFF",
point2: "#FFFFFF",
point3: "#FFFFFF",
point4: "#FFFFFF",
point5: "#FFFFFF",
point6: "#FFFFFF",
point7: "#FFFFFF",
point8: "#FFFFFF",
point9: "#FFFFFF",
});
};
_changeHeadPoint = (point) => {
switch (point + 1) {
case 1:
this.setState({
point1: '#1F67B9'
});
break;
case 2:
this.setState({
point2: '#1F67B9'
});
break;
case 3:
this.setState({
point3: '#1F67B9'
});
break;
case 4:
this.setState({
point4: '#1F67B9'
});
break;
case 5:
this.setState({
point5: '#1F67B9'
});
break;
case 6:
this.setState({
point6: '#1F67B9'
});
break;
case 7:
this.setState({
point7: '#1F67B9'
});
break;
case 8:
this.setState({
point8: '#1F67B9'
});
break;
case 9:
this.setState({
point9: '#1F67B9'
});
break;
}
};
}
const styles = StyleSheet.create({
gesturePassword: {
backgroundColor: 'white',
},
headContent: {
flex: 1, justifyContent: 'center', flexDirection: 'row'
},
headCircle: {
borderRadius: 30,
borderWidth: 1,
borderColor: "#1F67B9",
width: 15,
height: 15,
margin: 4,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
| pointBackgroundColor | string | Yes | 'transparent' | determine bgcolor of gesture point |
| gestureAreaLength | number | Yes | 222 | determine width and height of gesture area |
| color | string | Yes | '#A9A9A9' | determine color of normal gesture point |
| activeColor | string | Yes | '#00AAEF' | determine color of active gesture point |
| warningColor | string | Yes | 'red' | determine color of warning gesture point |
| lineColor | string | Yes | determine color of line, if does not set this, the color of line will be the same as gesture point | |
| lineWidth | string | Yes | 1 | determine width of line |
| warningDuration | number | Yes | 1500 | determine duration when gesture status is warning |
| topComponent | element | Yes | determine the presentation above gesture area | |
| bottomCompont | element | Yes | determine the presentation below gesture area | |
| isWarning | bool | Yes | false | determine gesture warning status |
| showArrow | bool | Yes | true | determine whether show arrow in point |
| allowCross | bool | Yes | true | determine whether allow a line cross a point |
| onStart | func | Yes | determine the listener which is called before gesture is granted | |
| onMove | func | Yes | determine the listener which is called after gesture is moved | |
| onReset | func | Yes | determine the listener which is called after gesture is reseted | |
| onFinish | func | Yes | determine the listener which is called after gesture actions is finished | |
| isDebug | bool | Yes | false | log debug |
| viewDelay | number | Yes | 300(ms) | to relayout the view position delay (in msecons) |
| recomputeLayout | func | Yes | -- | to recomputeLayout the view Screen positions |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent