react native input 元件簡單封裝

摘要： 專案開發中 我們用到的一些 常用元件，大部分都是公用的，每次用的時候好多程式碼，樣式，都要拷貝一份，倒不如根據自己的專案把元件進行封裝，用的時候直接引進來。 下面介紹下 input 元件的封裝，其他元件也是類似封裝 看下效果圖： image.png...

專案開發中 我們用到的一些 常用元件，大部分都是公用的，每次用的時候好多程式碼，樣式，都要拷貝一份，倒不如根據自己的專案把元件進行封裝，用的時候直接引進來。

下面介紹下 input 元件的封裝，其他元件也是類似封裝

看下效果圖：

元件程式碼：

'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
};
};
 <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,
},
});