整一个React Native版的手势密码实现

前言

    写RN项目也有段时间啦，关于RN的知识零零散散、知道的不知道的，踩了那么多坑，我们的项目也总算要上了。这期间收获也不少，但是不知道的也不少。最近我想自己整个手势密码的模块，百度了一遍，发现网上有很多版本，我也尝试了很多人家提供的东西，但是就是跑不起来，各种报红，有的项目修改后能跑起来的把感觉效果不行，还得自己大刀阔斧的修改。终于，在我的不断坚持下，找到了这个开源的项目：点击打开链接  起初，导入进来的时候也是不成功，不过好在我修好了本地的报红，为了做个笔记，也为了方便以后，今天就拿出来分享下，如果能帮到有需要的同学，那是最好的了。先来看下效果：

                                            

下面就进入正题，怎样把这个轮子拿过来修下就为我所用。

导入组件

npm install react-native-smart-gesture-password --save

npm install react-native-smart-button --save

npm install prop-type --save 
或者 yarn add prop-types

代码

App.js 这个文件可以自己自由配置，这里相当于是程序的入口。

mport React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  TouchableHighlight,
} from 'react-native';
import GesturePasswordDemo from './src/gesture/gesturePasswordDemo'

export default class App extends Component {
  render() {
    return (
      <GesturePasswordDemo/>
    );
  }
}

注意，由于GesturePasswordDemo这个组件在我本地的位置是上面的路径：/src/gesture/ GesturePasswordDemo,记得配置好自己的组件路径。

GesturePasswordDemo.js文件

import React, {
    Component,
} from 'react'
import {
    Alert,
    View,
    Text,
    Dimensions,
} from 'react-native'

import GesturePassword from 'react-native-smart-gesture-password'
import Button from 'react-native-smart-button'

export default class gesturePasswordDemo extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isWarning: false,
            message: '请输入手势密码',
            messageColor: '#A9A9A9',
            password: '',
            thumbnails: [],
        };
        this._cachedPassword = ''
    }

    componentDidMount() {
        this._cachedPassword = '13457' //get cached gesture password
    }

    render() {
        return (
            <GesturePassword
                style={{ paddingTop: 20 + 44, }}
                pointBackgroundColor={'#F4F4F4'}
                isWarning={this.state.isWarning}
                color={'#A9A9A9'}
                activeColor={'#00AAEF'}
                warningColor={'red'}
                warningDuration={1500}
                allowCross={true}
                topComponent={this._renderDescription()}
                bottomComponent={this._renderActions()}
                onFinish={this._onFinish}
                onReset={this._onReset}
            />
        )
    }

    _renderThumbnails() {
        let thumbnails = []
        for (let i = 0; i < 9; i++) {
            let active = ~this.state.password.indexOf(i)
            thumbnails.push((
                <View
                    key={'thumb-' + i}
                    style={[
                        { width: 8, height: 8, margin: 2, borderRadius: 8, },
                        active ? { backgroundColor: '#00AAEF' } : { borderWidth: 1, borderColor: '#A9A9A9' }
                    ]}
                />
            ))
        }
        return (
            <View style={{ width: 38, flexDirection: 'row', flexWrap: 'wrap' }}>
                {thumbnails}
            </View>
        )
    }

    _renderDescription = () => {
        return (
            <View style={{ height: 158, paddingBottom: 10, justifyContent: 'flex-end', alignItems: 'center', }}>
                {this._renderThumbnails()}
                <Text
                    style={{ fontFamily: '.HelveticaNeueInterface-MediumP4', fontSize: 14, marginVertical: 6, color: this.state.messageColor }}>{this.state.message}</Text>
            </View>
        )
    }

    _renderActions = () => {
        return (
            <View
                style={{ position: 'absolute', bottom: 0, flex: 1, justifyContent: 'space-between', flexDirection: 'row', width: Dimensions.get('window').width, }}>
                <Button
                    style={{ margin: 10, height: 40, justifyContent: 'center', }}
                    textStyle={{ fontSize: 14, color: '#A9A9A9' }}>
                    {/* Forget password */}
                    忘记手势密码
                </Button>
                <Button
                    style={{ margin: 10, height: 40, justifyContent: 'center', }}
                    textStyle={{ fontSize: 14, color: '#A9A9A9' }}>
                    {/* Login other accounts */}
                    其他方式登录
                </Button>
            </View>
        )
    }

    _onReset = () => {
        let isWarning = false
        //let password = ''
        let message = '请输入手势密码'
        let messageColor = '#A9A9A9'
        this.setState({
            isWarning,
            //password,
            message,
            messageColor,
        })
    }

    _onFinish = (password) => {
        if (password === this._cachedPassword) {
            let isWarning = false
            let message = '验证成功'
            let messageColor = '#00AAEF'
            this.setState({
                isWarning,
                password,
                message,
                messageColor,
            })
        }
        else {
            let isWarning = true
            let message
            let messageColor = 'red'
            if (password.length < 4) {
                message = '至少需要连接4个点'
                Alert.alert(message)
                this.setState({
                    isWarning,
                    password,
                    message,
                    messageColor,
                })
                return
            }
            else {
                message = '验证失败'
                Alert.alert(message)
                this.setState({
                    isWarning,
                    password,
                    message,
                    messageColor,
                })
                return
            }

        }
    }

}

OK，代码就这些，重点来了（敲下黑板）：当我们就这样运行的时候，我自己的机器上会报错，最终排查，是发现导入的组件有问题，找到node_modules文件下的react-native-smart-gesture-password文件，展开后是这样的：这个时候，需要修改的文件有Arrow.js、Circle.js、GesturePassword.js、Line.js、Point.js这5个文件，修改的内容都是一样的，就是将这些文件中的PropTypes导入方式都拿出来单独导入，代码是：import PropTypes from 'prop-types'，而注释掉或者直接删掉React中导入的PropTypes，贴张图吧，记得5个文件都要改成这样：

最后npm run start ，重新加载下就会发现我们想要的效果就出来了。总是苦于找不到一个合适的手势密码模块用，终于搞好了，如果有需要的同学可以自己动手做下。至于为什么会这样，查了下说是随着React Native的升级，系统废弃了很多的东西，过去我们可以直接使用 React.PropTypes 来进行属性确认，不过这个自 React v15.5 起就被移除了，转而使用prop-types库来进行替换。最后，谢谢大家！