React Native 之 手势密码

手势密码效果图

• 场景需求：
  手势密码解锁

• 引用组：react-native-gesture-password

• 安装：
  npm install react-native-gesture-password --save
  或者
  yarn add react-native-gesture-password

---

• 属性

  • message （string）
    展示给用户的提示信息。

  • status （string）
    状态为：normal、right or wrong，用来验证手势密码是否准确是需要自己在 onEnd 事件中来判断的。

  • normalColor（string）
    使用此颜色呈现默认的圆形颜色。

  • rightColor（string）
    密码正确时候的颜色。

  • wrongColor（string）
    密码错误时候的颜色。

  • interval（number）
    圆圈重置的时间间隔。

  • allowCross（string）
    允许跨越圆圈，默认为 false。

  • onStart（function）
    当用户开始输入的手势密码时触发。

  • onEnd（function）
    当用户结束输入手势密码时触发。

---

• 示例：

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);
        }
    }
}

• 设置密码

  
  设置手势密码效果图

• 以上代码没啥好说的，真正有意思的地方在于为了满足我们自定义的场景（比如：手势图的顶部需要加个用户头像或者如图中显示的第一次设置密码后显示图），而修改布局的时候，因为这个手势图的位置使用 position 的 absolute 来写的：

  • 第一：圆圈的位置和线的坐标位置必须一一对应（否则会出现错位的现象）；
  • 更改样式主要在于：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 次，不再监听滑动。
  2、设置时的提示样式，只保留第一次滑动轨迹，重置后清空

（眼尖的同学可能看出了两幅图样式不太一致，因为第一幅图还没正式开发 ... ）

• 由于篇幅原因，具体想要知道整个效果图的代码或者有补充地方的可以加技术群：631730313