前言
写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库来进行替换。最后,谢谢大家!