rn-project
Version:
#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux
420 lines (409 loc) • 11.4 kB
JavaScript
;
import React, { Component } from 'react';
import {
Modal,
StyleSheet,
Dimensions,
View,
Text,
TouchableOpacity,
Platform,
Vibration,
Alert,
} from 'react-native';
import PropTypes from 'prop-types';
import BaseStyle from '../constants/Style';
const sceenWidth = Dimensions.get('window').width;
export default class PasswordModalComponent extends Component {
static defaultProps = {
modalTitle: '请输入密码',
animationType: 'slide',
pwdShow: false, //是否开启密码提示
pwdVal: '',
isOpenVibration: false, //是否开启震动
errorText: '请输入6位数字密码~',
checkPwd: false, //默认关闭校验
closePwd: () => {},
forGetToGo: () => {
alert('执行了忘记密码操作');
},
};
static propTypes = {
modalVisible: PropTypes.bool, //是否开启安全键盘
modalTitle: PropTypes.string, //标题
animationType: PropTypes.string, //弹出效果
pwdShow: PropTypes.bool, //是否开启密码提示
errorText: PropTypes.string, //错误提示
isOpenVibration: PropTypes.bool, //是否开启震动
forGetToGo: PropTypes.func, //忘记密码操作事件
closePwd: PropTypes.func, // 关闭密码键盘
callBackPwd: PropTypes.func, // 密码的回调
checkPwd: PropTypes.bool, //是否开启校验
};
constructor(props) {
super(props);
this.state = {
password: '',
staticKeys: [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
};
}
_setModalVisible(visible) {
const { closePwd, checkPwd, errorText } = this.props;
if (visible) {
this.setState({ password: '' });
}
//开启校验
if (checkPwd && !/^[0-9]{6}$/.test(this.state.password)) {
Alert.alert('', errorText);
return false;
}
closePwd();
}
clearPwd() {
this.setState({ password: '' });
}
keyOnPress(key) {
const pattern = Platform.OS === 'android' ? [0, 150, 0, 0] : [0];
const {
isOpenVibration,
closePwd,
callBackPwd,
checkPwd,
errorText,
} = this.props;
if (isOpenVibration) {
Vibration.vibrate(pattern);
}
let password = this.state.password;
if (key === 'deleteBtn') {
if (password.length > 0) {
this.setState({ password: password.substring(0, password.length - 1) });
}
return;
}
if (key === 'reset') {
this.clearPwd();
}
this.setState({ password: password + key }, () => {
if (password.length === 5) {
//开启校验 并且在规则成立下
if (checkPwd && !/^[0-9]{6}$/.test(this.state.password)) {
Alert.alert('', errorText);
return false;
}
this.clearPwd();
closePwd();
callBackPwd(this.state.password);
return;
}
});
}
render() {
const {
animationType,
modalVisible,
modalTitle,
forGetToGo,
closePwd,
} = this.props;
const modalBackgroundStyle = {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
};
let length = this.state.password.length;
return (
<Modal
animationType={animationType}
transparent={true}
visible={modalVisible}
onRequestClose={() => {
this._setModalVisible(false);
}}>
<TouchableOpacity
activeOpacity={0.9}
onPress={() => {
this._setModalVisible(false);
}}
style={[styles.container, modalBackgroundStyle]}
/>
<View style={styles.keyContainer}>
<View style={[styles.innerContainer]}>
<View style={[styles.modalTitle]}>
<View style={styles.modalTitleView}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={[styles.modalTitleText]}>{modalTitle}</Text>
</View>
<TouchableOpacity
onPress={() => {
this._setModalVisible(false);
}}>
<Text style={[styles.modalTitleTextIcon]}></Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.pwdContainerView}>
<View style={styles.pwdContainer}>
<View style={[styles.borderRightStyle, styles.pwdItems]}>
{length > 0 ? <View style={styles.pwdItem} /> : null}
</View>
<View style={[styles.borderRightStyle, styles.pwdItems]}>
{length > 1 ? <View style={styles.pwdItem} /> : null}
</View>
<View style={[styles.borderRightStyle, styles.pwdItems]}>
{length > 2 ? <View style={styles.pwdItem} /> : null}
</View>
<View style={[styles.borderRightStyle, styles.pwdItems]}>
{length > 3 ? <View style={styles.pwdItem} /> : null}
</View>
<View style={[styles.borderRightStyle, styles.pwdItems]}>
{length > 4 ? <View style={styles.pwdItem} /> : null}
</View>
<View style={[styles.pwdItems]}>
{length > 5 ? <View style={styles.pwdItem} /> : null}
</View>
</View>
{
<TouchableOpacity
onPress={() => {
closePwd();
this.clearPwd();
setTimeout(() => {
//这里加个延时跳转不然 会出现意外的错误 原生线程问题
forGetToGo();
}, 200);
}}
style={styles.pwdForgetContainer}>
<Text style={styles.pwdForgetText}>忘记密码</Text>
</TouchableOpacity>
}
</View>
</View>
{this.state.staticKeys.map(i => {
return (
<View style={styles.keyItems} key={i + '_'}>
{i.map(j => {
return (
<TouchableOpacity
key={'_' + j}
onPress={this.keyOnPress.bind(this, j)}
style={[
styles.keyItem,
styles.keyBorderRight,
styles.keyBorderBottom,
]}>
<Text style={styles.keyText}>{j}</Text>
</TouchableOpacity>
);
})}
</View>
);
})}
<View style={styles.keyItems}>
<TouchableOpacity
style={[
styles.keyItem,
styles.keyBorderRight,
{ backgroundColor: '#d7d8dc' },
]}
onPress={this.keyOnPress.bind(this, 'reset')}>
<Text style={[styles.keyText, { fontSize: 16, color: '#000' }]}>
重置
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.keyOnPress.bind(this, '0')}
style={[
styles.keyItem,
styles.keyBorderRight,
styles.keyBorderBottom,
]}>
<Text style={styles.keyText}>0</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.keyOnPress.bind(this, 'deleteBtn')}
style={[
styles.keyItem,
styles.keyBorderRight,
{ backgroundColor: '#d7d8dc' },
]}>
<Text
style={[
styles.keyText,
{ fontFamily: 'iconfont', fontSize: 37 / 2 },
]}>

</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
}
}
let styles = StyleSheet.create({
modelView: {
flex: 1,
backgroundColor: 'rgba(40,40,40,0.6)',
},
pwdContainerView: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
paddingTop: 35,
paddingBottom: 80 / 2,
backgroundColor: '#f7f7f7',
width: sceenWidth,
},
modalTitleView: {
...BaseStyle.row,
},
keyBorderRight: {
borderRightColor: '#d1d1d1',
borderRightWidth: 1,
},
keyBorderBottom: {
borderBottomColor: '#d1d1d1',
borderBottomWidth: 1,
},
keyTextEN: {
color: '#000',
fontSize: 20 / 2,
},
keyText: {
color: '#000',
fontSize: 50 / 2,
},
keyItem: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
flex: 1,
height: 118 / 2,
},
keyItems: {
...BaseStyle.row,
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
flex: 1,
},
keyContainer: {
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: '#fff',
height: 860 / 2,
width: sceenWidth,
},
borderRightStyle: {
borderRightColor: '#e5e5e5',
borderRightWidth: 1,
},
pwdItems: {
flex: 1,
height: 112 / 2,
justifyContent: 'center',
alignItems: 'center',
},
pwdItem: {
height: 30 / 2,
width: 30 / 2,
backgroundColor: '#333',
borderRadius: 15 / 2,
},
pwdContainer: {
...BaseStyle.row,
height: 112 / 2,
width: sceenWidth - 30 / 2 - 32 / 2,
borderRadius: 2,
borderWidth: 1,
borderColor: '#e5e5e5',
backgroundColor: '#fff',
},
pwdForgetContainer: {
width: sceenWidth - 30 / 2 - 32 / 2,
alignItems: 'flex-end',
paddingTop: 20 / 2,
},
pwdForgetText: {
fontFamily: 'iconfont',
fontSize: 26 / 2,
color: '#1891e3',
},
modalFooterText: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
fontSize: 16,
color: '#fff',
},
modalButton: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
height: 70 / 2,
width: 280 / 2,
backgroundColor: '#ff5039',
borderRadius: 4,
},
modalFooter: {
...BaseStyle.row,
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
marginTop: 45 / 2,
marginBottom: 45 / 2,
width: sceenWidth - 30 / 2 - 32 / 2,
},
modalTitle: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
paddingLeft: 30 / 2,
paddingRight: 30 / 2,
paddingTop: 25 / 2,
paddingBottom: 25 / 2,
width: sceenWidth,
overflow: 'hidden',
},
modalTitleTextIcon: {
fontSize: 32 / 2,
color: '#666',
fontFamily: 'iconfont',
},
modalTitleText: {
flex: 1,
fontSize: 30 / 2,
color: '#333',
fontFamily: 'iconfont',
},
container: {
...BaseStyle.justifyContentCenter,
flex: 1,
},
innerContainer: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
backgroundColor: '#fff',
},
row: {
...BaseStyle.row,
...BaseStyle.alignItemsCenter,
flex: 1,
marginBottom: 20 / 2,
},
rowTitle: {
flex: 1,
fontWeight: 'bold',
},
button: {
borderRadius: 5,
flex: 1,
height: 44,
alignSelf: 'stretch',
justifyContent: 'center',
overflow: 'hidden',
},
buttonText: {
fontSize: 18,
margin: 5,
textAlign: 'center',
},
});