React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
TextInput组件介绍
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。
组件的常用属性
（1）autoCapitalize：控制TextInput是否要自动将特定字符切换为大写。可选值有：none、sentences、words、characters。
- characters: 所有的字符。
- words: 每个单词的第一个字符。
- sentences: 每句话的第一个字符（默认）。
- none: 不自动切换任何字符为大写。
（2）placeholder：占位符，在输入前显示的文本内容。
（3）value：文本输入框的默认值。
（4）placeholderTextColor：占位符文本的颜色。
（5）secureTextEntry：如果为 true，表示密码输入框。文本显示为“*”，默认值为false。
（6）multiline：如果为 true，表示多行输入。
（7）editable：默认为 true。如果设置为 false 表示不可编辑。
（8）autoFocus：如果为 true，则自动获取焦点。
（9）clearButtonMode：表示什么时候会显示清除按钮。可选值有：never、while-editing、unless-editing、always。
（10）maxLength：能够输入的最长字符数。
（11）enablesReturnKeyAutomatically：默认为 false。设置为 true 表示没有输入文本时返回键无法使用。
（12）returnKeyType：表示软键盘返回键显示的字符串。可选值为：default、go、google、join、next、route、search、send、yahoo、done、emergency-call。
（13）secureTextEntry：默认为 false。如果为 true，则像密码框一样隐藏输入内容。
（14）autoCorrect：如果为false，会关闭拼写自动修正。默认值是true。
（15）blurOnSubmit：如果为true，文本框会在提交的时候失焦。对于单行输入框默认值为true，多行则为false。注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。
（16）caretHidden：如果为true，则隐藏光标。默认值为false。
（17）keyboardType：keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') ，决定弹出的何种软键盘的，譬如
numeric（纯数字键盘）。
这些值在所有平台都可用：
- default
- numeric
- email-address
- phone-pad
（18）iosreturnKeyType：iosreturnKeyType enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') 决定“确定”按钮显示的内容。在Android上你还可以使用returnKeyLabel来自定义文本。
跨平台
下列这些选项是跨平台可用的：
donegonextsearchsend
限Android
下列这些选项仅限Android使用：
noneprevious
限iOS
下列这些选项仅限iOS使用：
defaultemergency-callgooglejoinrouteyahoo
（19）selectTextOnFocus：如果为true，当获得焦点的时候，所有的文字都会被选中。
（20）selection：selection {start: number, end: number} 设置选中文字的范围（指定首尾的索引值）。如果首尾为同一索引位置，则相当于指定光标的位置。
（21）selectionColor：设置输入框高亮时的颜色（在iOS上还包括光标）
组件的常用方法
（1）onChange：当文本发生变化时，调用该函数。
（2）onEndEditing：当结束编辑时，调用该函数。
（3）onBlur：失去焦点时触发。
（4）onFocus：获得焦点时触发。
（5）onSubmitEditing：当结束编辑后，点击键盘的提交按钮触发该事件。
（6）onChangeText：当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
（7）onLayout：当组件挂载或者布局变化的时候调用，参数为
{x, y, width, height}。（8）onScroll：在内容滚动时持续调用，传回参数的格式形如
{ nativeEvent: { contentOffset: { x, y } } }。 也可能包含其他和滚动事件相关的参数，但是在Android上，出于性能考虑，不会提供contentSize参数。（9）onSelectionChange：长按选择文本时，选择范围变化时调用此函数，传回参数的格式形如
{ nativeEvent: { selection: { start, end } } }。（10）iosonKeyPress：当一个键被按下的时候调用此回调。传递给回调函数的参数为
{ nativeEvent: { key: keyValue } }，其中keyValue即为被按下的键。会在onChange之前调用。组件的使用实例
1，文本加输入框(封装组件 iOS Android)
封装组件InputView.js的使用实例，如有需要完整的代码，请留言评论
<View >
<Text>请认真填写资料</Text>
<View style={{ marginTop: 12 }}>
<InputView name={'账号'}
hintText={''}
editableV={false}
value={String(this.state.telephone)}
/>
<InputView name={'支付密码'}
isPassword={true}
hintText={'请输入数字+字母的组合'}
onChangeText={(inputData) => { this.setState({ password: inputData }) }}
/>
<InputView name={'再次确认'}
isPassword={true}
//value={this.state.nickname}
hintText={'请再次输入'}
onChangeText={(inputData) => { this.setState({ confirmPass: inputData }) }}
/> </View>
</View>
2，富文本编辑(封装组件 iOS Android)
富文本RichTextView的使用实例，如有需要完整的代码，请留言评论
<View style={{ marginTop: 20 }}>
<Text
style={{
fontSize: 14,
color: AppSetting.BLACK,
paddingLeft: 20,
marginBottom: 10
}}>奖品描述</Text>
<RichTextView
inputStyle={styles.inputStyle}
placeholder="请填写奖品描述(1000字以内哦)"
minHeight={240} // 最小高度,默认为100
maxLength={1000} // 最大长度,默认为100
onChangeText={(inputValue) => {
let desPrizes = CommonMethod.filteremoji(inputValue, 1)//表情过滤机制
this.setState({ desPrizes: desPrizes })
}}
showCount={true} // 展示剩余文字, 默认为true
/>
</View>
RichTextView.js富文本编辑组件
/**
* Created by jackson on 2018/08/13.
* 富文本
*/
import React, {Component} from 'react';
import PropTypes from 'prop-types'
import {
StyleSheet,
View,
TextInput,
Text,
Dimensions
} from 'react-native';
const ScreenHeight = Dimensions.get('window').height;
const ScreenWidth = Dimensions.get('window').width;
const defaultMinHeight = 100
//模块声名并导出
export default class RichTextView extends Component {
//属性声名
static propTypes = {
style:PropTypes.object,
inputStyle:PropTypes.any,
maxLength:PropTypes.number, // 限制文字长度
placeholder:PropTypes.string, // 占位文字
minHeight:PropTypes.number, // 最小高度
showCount:PropTypes.bool,
onChangeText:PropTypes.func,//获取编辑的文本
}; //默认属性
static defaultProps = {
maxLength: 100,
showCount: true,
minHeight: defaultMinHeight
}; //构造函数
constructor(props) {
super(props);
//状态机变量声明
this.state = {
text: '',
};
} //渲染
render() {
return (
<View style={styles.container}>
<View style={[styles.inputViewStyle,this.props.style,{minHeight:this.props.minHeight}]}>
<TextInput
style={[styles.inputTextStyle,this.props.inputStyle,{minHeight:this.props.minHeight}]}
placeholder={this.props.placeholder ? this.props.placeholder :'请输入'}
multiline={true}
paddingVertical={0}
selectionColor = {'#b2b2b2'}
textAlignVertical={'top'}
placeholderTextColor={'#b2b2b2'}
underlineColorAndroid={'transparent'}
maxLength={this.props.maxLength}
defaultValue = {this.state.text}
onChangeText={
(text) => {
this.props.onChangeText(text)
this.setState({
text: text
})
}
}
/>
{
this.props.showCount ?
<Text style={{position: 'absolute', bottom: 5, right: 10, fontSize: 14}}>
{this.state.text.length}/{this.props.maxLength}
</Text>
:
null
}
</View>
</View>
);
}
}; const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
inputViewStyle: {
width:ScreenWidth - 40,
minHeight: defaultMinHeight,
},
inputTextStyle: {
fontSize: 14,
color: '#666666',
width: '100%',
minHeight: defaultMinHeight,
padding: 10,
paddingBottom: 30,
paddingTop: 10
}
});