项目开发中 我们用到的一些 常用组件，大部分都是公用的，每次用的时候好多代码，样式，都要拷贝一份，倒不如根据自己的项目把组件进行封装，用的时候直接引进来。
下面介绍下 input 组件的封装，其他组件也是类似封装
看下效果图：
image.png
组件代码：
'use strict';
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
};
};
this.setState({ phone: text },()=>{
this.state.phone.length > 0 ?
this.setState({ isOpenClear: true })
:
this.setState({ isOpenClear: false })
})}
clear={() => {
this.setState({ phone: '',isOpenClear:false })
}}
/>
2. 关于 验证码输入框的使用
{ }
}
/>
{ }
}
/>
*/
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 (
{LeftIcon}
{LeftText}
) : null}
{isMsgInput ? (
MsgDisable ? (
{msgCodeText}
) : (
{
onPress;
}}>
{msgCodeText}
)
) : null}
{isImageMsg ? (
{
onPressImage;
}}>
) : null}
);
}
}
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,
},
});