catericy / react-native-ok-gesture-password

gesture password component,smooth easy and quick

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

(修复了偏移的bug，在navigation存在或者statusBar的情况都可以适用，有bug，直接提issue吧)

/*

• 因为刚上手RN不久，解决offset的这个方法并不太高明，有更好的办法请赐教
• 因为这里取了 view 的绝对坐标，因此可能父节点 有动作啥的，这时候取的坐标是不对的
• 这里提供了 recomputeLayout 这个函数，主动刷新，因为只有使用者自己知道动作什么时候结束
• 这个时候刷新一下位置即可,默认delay了300ms，我觉得对于绝大多数view是足够的,也可以自己设置 viewDelay
• this.ref.recomputeLayout () ; */

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
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