react-native-ok-gesture-password
gesture password component,smooth easy and quick
base on react-native-smart-gesture-password More friendly to existing reactive native versions, adding moving callbacks
Preview
Installation
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, }, });Props
| 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 |
