React Native之TextInput组件解析示例

1 概述

TextInput组件和Text组件类似，内部都没有使用FlexBox布局，不同的是TextInput组件支持文字的输入，因为支持文字输入， TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性，而TextInput组件本身是没有特有的Style属性的。

2 属性

TextInput组件支持所有的View组件的属性，除此之外，它还有许多其他属性。

2.1 onChangeText

当输入框的内容发生变化时，就会调用onChangeText。

index.Android.js

rush:js;"> import React,{Component} from 'react'; import {AppRegistry,StyleSheet,View,TextInput,Button,Alert} from 'react-native'; class TextApp extends Component { constructor(props) { super(props); this.state = { searchText: "" } } render() { return ( { this.setState({searchText: text}); }}/> { Alert.alert('输入的内容为:' + this.state.searchText); } }/> ); } } const styles = StyleSheet.create({ container: { flex: 1,},searchBar: { flexDirection: 'row',height: 45,justifyContent: 'center',alignItems: 'center' },input: { flex: 1,borderColor: 'gray' },button: { flex: 1 } }); AppRegistry.registerComponent('ViewSample',() => TextApp);

上面的例子我们用到了TextInput组件的onChangeText属性，当我们在TextInput中输入内容时，这个内容就会通过onChangeText的参数text传递回来，在onChangeText中将text的内容保存到state中。当我们点击Button时，通过Alert将state中保存的内容展现出来。

运行程序效果如下图所示。

在输入框中输入android，点击搜索Button，可以看到输入的Android展示到了Alert中。

2.2 onChange

当输入框的内容发生变化时，也会调用onChange，只不过它所返回的参数是一个event，我们来改写2.1的代码：

rush:xml;"> ... { this.setState({searchText: event.nativeEvent.text}); }}/> ...

通过event.nativeEvent.text可以得到用户输入的内容，如果只是想要得到用户输入的内容，还是用onChangeText比较合适。

2.3 keyboardType

keyboardType用于设置弹出软键盘的类型。它的取值为范围为： enum(‘default',‘email-address',‘numeric',‘phone-pad',‘ascii-capable',‘numbers-and-punctuation',‘url',‘number-pad',‘name-phone-pad',‘decimal-pad',‘twitter',‘web-search') ，其中default、numeric、email-address和phone-pad是跨平台。

rush:xml;"> ... { this.setState({searchText: text}); }}/> ...

将keyboardType的值设置为phone-pad，效果如下图所示。

2.4 blurOnSubmit

如果blurOnSubmit值为true，文本框会在按下提交键时失去焦点。对于单行输入框，blurOnSubmit默认值为true，多行则为false。

在单行的情况下，点击键盘上的提交按钮时，TextInput的效果如下图所示。

将blurOnSubmit设置为false：

rush:xml;"> ... { this.setState({searchText: text}); }}/> ...

点击键盘上的提交按钮时，TextInput的效果如下图所示。

2.5 onSubmitEditing

当提交键被按下时会调用onSubmitEditing，如果multiline等于true，则此属性不可用。

rush:xml;"> ... { this.setState({searchText: text}); }} onSubmitEditing={(event) => { console.log(event.nativeEvent.text); }} /> ...

运行程序并在App的开发菜单中选择Debug JS Remotely，这时我们输入Android并按下提交键，在Console控制台中就会输出结果。（笔者用的是WebStorm）

2.6 returnKeyType

用于设置软键盘回车键的样式，Android平台可以使用returnKeyLabel来设置软键盘回车键的内容。

returnKeyType的取值为enum(‘done',‘Go',‘next',‘search',‘send',‘none',‘prevIoUs',‘default',‘emergency-call',‘google',‘join',‘route',‘yahoo')。

其中跨平台的取值有：done、next、search、send。

Android平台独有：none、prevIoUs。

iOS平台独有：default、emergency-call、google、join、route、yahoo。

如果我们将returnKeyType设置为go时，效果如下图所示。

returnKeyType设置为send时，效果如下图所示。

2.7 其他跨平台属性

属性名 取值 说明 aracters')英文字母自动大写规则，取值分别表示：不自动大写、每句话首字母自动大写、每个单词首字母大写、全部字母自动大写自动检测用户输入的英语单词正确性，默认值为true默认值为false。用户开始输入时，该值将改变提示用户应该输入什么修改字符，默认值为true用户输入多少字符默认值为false默认值为false获取焦点时，组件中的内容会被自动选中调用此回调函数调用此回调函数调用，参数为{x,y,width,height}内容滚动时持续调用，传回参数的格式形如{ nativeEvent: { contentOffset: { x,y } } }调用此函数，传回参数的格式形如 { nativeEvent: { selection: { start,end } } }文字内容

2.8 Android平台独有属性

属性名 取值 说明 一个图片放置在左侧图片的Padding(如果有的话)，以及文本框本身的Paddingnes键盘回车键的内容，优先级高于returnKeyTypedisableFullscreenUI默认值)，如果TextInput的输入空间小，系统可能会进入全屏文本输入模式

2.9 iOS平台独有属性

属性名 取值 说明 显示清除按钮内容arance键盘的颜色一个键被按下的时候调用此回调，传递给回调函数的参数为{ nativeEvent: { key: keyvalue } }键盘会在文本框内没有文字的时候禁用确认按钮 ，默认值为false

3 方法

clear()

clear用于清空输入框的内容。

想要使用组件的方法则需要使用组件的引用，例子如下所示。

rush:js;"> ... render() { return ( { this.setState({searchText: text}); }} /> { this.refs.textInputRefer.clear(); } }/> ); } ...

在TextInput标签中定义引用的名称：ref="textInputRefer"，这样我们通过 this.refs.textInputRefer就可以得到TextInput 组件的引用。在Button的onPress函数中，调用了TextInput的clear方法，这样当我们点击“清除”按钮时，文本框中的内容就会被清除。

isFocused(): boolean

返回值表明当前输入框是否获得了焦点。

好了，到这里TextInput组件就介绍到这里，还有一些没有列出的属性请查看官方文档。希望对大家的学习有所帮助，也希望大家多多支持编程之家。