React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

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来自定义文本。

跨平台

下列这些选项是跨平台可用的：

• done
• go
• next
• search
• send

限Android

下列这些选项仅限Android使用：

• none
• previous

限iOS

下列这些选项仅限iOS使用：

• default
• emergency-call
• google
• join
• route
• yahoo

（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
     }
 });