rn-project
Version:
#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux
340 lines (323 loc) • 9.58 kB
JavaScript
;
import React, { Component } from 'react';
import {
View,
Text,
Image,
StyleSheet,
TextInput,
TouchableOpacity,
} from 'react-native';
import BaseStyle from '../constants/Style';
import PropTypes from 'prop-types';
/**
* 使用方法
*
*
* 1，关于 右边带清楚按钮的使用 把输入框变成可控
*
* constructor(props) {
super(props);
this.state = {
phone: '',
isOpenClear: false
};
};
<Input
LeftIcon={'\ue605'}
LeftText={"手机号"}
placeholder={'请输入手机号码'}
isOpenClear={this.state.isOpenClear}
defaultValue={this.state.phone}
keyboardType="numeric"
maxLength={11}
onChangeText={text => this.setState({ phone: text },()=>{
this.state.phone.length > 0 ?
this.setState({ isOpenClear: true })
:
this.setState({ isOpenClear: false })
})}
clear={() => {
this.setState({ phone: '',isOpenClear:false })
}}
/>
2. 关于 验证码输入框的使用
<Input
LeftText={"验证码"}
textAligin={'left'}
isMsgInput={true}
keyboardType="numeric"
msgCodeText={'获取验证码'}
placeholder={'请输入收到的验证码'}
maxLength={6}
onPress={
() => { }
}
/>
<Input
LeftText={"验证码"}
textAligin={'left'}
isMsgInput={true}
keyboardType="numeric"
msgCodeText={'60s'}
placeholder={'请输入收到的验证码'}
maxLength={6}
MsgDisable={true}
onPress={
() => { }
}
/>
*/
export default class Input extends Component {
static defaultProps = {
LeftIcon: '', //左边icon
LeftText: '',
LeftIconStyle: '',
LeftTextStyle: '',
textAligin: 'left',
isOpenClear: false,
style: {},
keyboardType: 'default',
returnKeyType: '',
placeholder: '请输入相关内容',
placeholderTextColor: '#cccccc',
editable: true, //如果为fals文本不可编辑
autoFocus: false,
caretHidden: false,
secureTextEntry: false,
multiline: false,
isMsgInput: false,
MsgDisable: false,
msgCodeText: '获取验证码',
isImageMsg: false,
MsgTextStyle: {},
MsgButtonStyle: {},
MsgButtonDisabledStyle: {},
MsgTextDisabledStyle: {},
ImageButtonStyle: {},
ImageUri: '',
isBase64: false,
};
static propTypes = {
LeftIcon: PropTypes.string, //左边icon
LeftText: PropTypes.string, //左边文字
LeftIconStyle: PropTypes.object, //左边Icon样式
LeftTextStyle: PropTypes.object, //左边文字样式，
isOpenClear: PropTypes.bool, //是否开启右边清楚按钮
isMsgInput: PropTypes.bool, //是否验证码输入框
MsgDisable: PropTypes.bool, //验证码按钮是否禁用
msgCodeText: PropTypes.string, //验证码按钮文字
MsgTextStyle: PropTypes.object, //验证码文本样式
MsgButtonStyle: PropTypes.object, //验证码按钮样式
MsgButtonDisabledStyle: PropTypes.object, //验证码禁用时的按钮样式
MsgTextDisabledStyle: PropTypes.object, //验证码禁用时的文本样式
isImageMsg: PropTypes.bool, //是否是图形验证码
ImageButtonStyle: PropTypes.object, //图形验证码样式
ImageUri: PropTypes.string, //图形验证码图片地址
isBase64: PropTypes.bool, //是否是base64的图片
style: PropTypes.object, //输入框样式，
textAligin: PropTypes.string, //文本对其方式
keyboardType: PropTypes.string, //键盘类型
maxLength: PropTypes.number, // 最大长度
returnKeyType: PropTypes.string, //键盘的弹出收回类型
placeholder: PropTypes.string, //placeholder
placeholderTextColor: PropTypes.string, //placeholder 颜色
editable: PropTypes.bool, //是否禁用
autoFocus: PropTypes.bool, //是否自动聚焦
caretHidden: PropTypes.bool, //是否隐藏光标
secureTextEntry: PropTypes.bool, //是否开启密码显示
defaultValue: PropTypes.string, //输入框默认值
multiline: PropTypes.bool, //是否允许多行输入
onChange: PropTypes.func, //当文本框内容变化时调用此回调函数
onBlur: PropTypes.func, //当文本框失去焦点的时候调用此回调函数。
onChangeText: PropTypes.func, //当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递
onFocus: PropTypes.func, //当文本框获得焦点的时候调用此回调函数。
clear: PropTypes.func, //清楚操作
onPress: PropTypes.func, //验证码的发送操作
onPressImage: PropTypes.func, //图形验证码的操作
};
constructor(props) {
super(props);
}
render() {
const {
LeftIcon,
LeftText,
LeftIconStyle,
LeftTextStyle,
isOpenClear,
style,
textAligin,
keyboardType,
maxLength,
returnKeyType,
placeholder,
placeholderTextColor,
editable,
autoFocus,
caretHidden,
secureTextEntry,
defaultValue,
multiline,
onChange,
onBlur,
onChangeText,
onFocus,
clear,
isMsgInput,
msgCodeText,
MsgTextStyle,
MsgButtonStyle,
MsgDisable,
MsgButtonDisabledStyle,
MsgTextDisabledStyle,
isImageMsg,
ImageButtonStyle,
ImageUri,
isBase64,
onPress,
onPressImage,
} = this.props;
const textAlignStyle =
textAligin === 'left'
? { textAlign: 'left', marginLeft: 5 }
: textAligin === 'right'
? { textAlign: 'right' }
: null;
const changeLeftStyle = LeftIcon ? { marginLeft: 5 } : null;
const baseImage = isBase64 ? `data:image/png;base64,${ImageUri}` : ImageUri; //base64图片处理
return (
<View style={styles.inputView}>
<View style={styles.leftView}>
<Text style={[styles.leftIcont, LeftIconStyle]}>{LeftIcon}</Text>
<Text style={[styles.leftText, LeftTextStyle, changeLeftStyle]}>
{LeftText}
</Text>
</View>
<TextInput
style={[styles.textInputStyle, style, textAlignStyle]}
underlineColorAndroid="transparent"
keyboardType={keyboardType}
maxLength={maxLength}
returnKeyType={returnKeyType}
placeholder={placeholder}
placeholderTextColor={placeholderTextColor}
editable={editable}
autoFocus={autoFocus}
caretHidden={caretHidden}
secureTextEntry={secureTextEntry}
defaultValue={defaultValue}
multiline={multiline}
onChange={onChange}
onBlur={onBlur}
onChangeText={onChangeText}
onFocus={onFocus}
/>
{isOpenClear ? (
<TouchableOpacity onPress={clear}>
<Text style={styles.closeIcon}></Text>
</TouchableOpacity>
) : null}
{isMsgInput ? (
MsgDisable ? (
<View style={[styles.MsgButtonDisabled, MsgButtonDisabledStyle]}>
<Text style={[styles.MsgTextDisabled, MsgTextDisabledStyle]}>
{msgCodeText}
</Text>
</View>
) : (
<TouchableOpacity
style={[styles.MsgButton, MsgButtonStyle]}
onPress={() => {
onPress;
}}>
<Text style={[styles.MsgText, MsgTextStyle]}>{msgCodeText}</Text>
</TouchableOpacity>
)
) : null}
{isImageMsg ? (
<TouchableOpacity
style={[styles.ImageButton, ImageButtonStyle]}
onPress={() => {
onPressImage;
}}>
<Image
style={[styles.ImageButton, ImageButtonStyle]}
source={{ uri: baseImage }}
/>
</TouchableOpacity>
) : null}
</View>
);
}
}
const styles = StyleSheet.create({
inputView: {
...BaseStyle.row,
...BaseStyle.alignItemsCenter,
paddingLeft: 15,
paddingRight: 15,
height: 60,
borderBottomColor: '#eeeeee',
borderBottomWidth: 1,
// backgroundColor:"red"
},
textInputStyle: {
flex: 1,
fontSize: 15,
height: 60,
padding: 0,
textAlign: 'right',
},
leftView: {
...BaseStyle.row,
},
leftIcont: {
fontFamily: 'iconfont',
fontSize: 15,
color: '#333',
},
leftText: {
fontSize: 15,
color: '#333',
},
closeIcon: {
fontFamily: 'iconfont',
fontSize: 14,
color: '#cccccc',
},
MsgButton: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
width: 90,
height: 35,
borderWidth: 1,
borderColor: '#31bcfe',
borderRadius: 4,
backgroundColor: '#effaff',
},
MsgText: {
fontSize: 14,
color: '#31bcfe',
},
MsgButtonDisabled: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
width: 90,
height: 35,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 4,
backgroundColor: '#ccc',
},
MsgTextDisabled: {
fontSize: 14,
color: '#fff',
},
ImageButton: {
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
width: 90,
height: 35,
},
});