TextInput 组件和 Text 组件类似,内部都没有使用 FlexBox 布局,不同的是 TextInput 组件支持文字的输入,因为支持文字输入, TextInput 组件要比 Text 组件多了一些属性和方法。TextInput 组件支持 Text 组件所有的 Style 属性,而 TextInput 组件本身是没有特有的 Style 属性的。
TextInput 组件支持所有的 View 组件的属性,除此之外,它还有许多其他属性。
当输入框的内容发生变化时,就会调用 onChangeText。
index.android.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 (
- <View style={styles.container}>
- <View style={styles.searchBar}>
- <TextInput style={styles.input} placeholder='请输入内容'
- onChangeText={(text) => {
- this.setState({searchText: text});
- }}/>
- <Button style={styles.button} title='搜索'
- onPress={ () => {
- Alert.alert('输入的内容为:' + this.state.searchText);
- }
- }/>
- </View>
- </View>
- );
- }
- }
- 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 中。
当输入框的内容发生变化时,也会调用 onChange,只不过它所返回的参数是一个 event,我们来改写 2.1 的代码:
- ...
- <TextInput style={styles.input} placeholder='请输入内容' keyboardType='default'
- onChange={(event) => {
- this.setState({searchText: event.nativeEvent.text});
- }}/>
- ...
通过 event.nativeEvent.text 可以得到用户输入的内容,如果只是想要得到用户输入的内容,还是用 onChangeText 比较合适。
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 是跨平台。
- ...
- <TextInput style={styles.input} placeholder='请输入内容' keyboardType='phone-pad'
- onChangeText={(text) => {
- this.setState({searchText: text});
- }}/>
- ...
将 keyboardType 的值设置为 phone-pad,效果如下图所示。
如果 blurOnSubmit 值为 true,文本框会在按下提交键时失去焦点。对于单行输入框,blurOnSubmit 默认值为 true,多行则为 false。
在单行的情况下,点击键盘上的提交按钮时,TextInput 的效果如下图所示。
将 blurOnSubmit 设置为 false:
- ...
- <TextInput style={styles.input} placeholder='请输入内容' blurOnSubmit={false}
- onChangeText={(text) => {
- this.setState({searchText: text});
- }}/>
- ...
点击键盘上的提交按钮时,TextInput 的效果如下图所示。
当提交键被按下时会调用 onSubmitEditing,如果 multiline 等于 true,则此属性不可用。
- ...
- <TextInput style={styles.input} placeholder='请输入内容' blurOnSubmit={true} multiline={false}
- onChangeText={(text) => {
- this.setState({searchText: text});
- }}
- onSubmitEditing={(event) => {
- console.log(event.nativeEvent.text);
- }}
- />
- ...
运行程序并在 App 的开发菜单中选择 Debug JS Remotely,这时我们输入 Android 并按下提交键,在 Console 控制台中就会输出结果。(笔者用的是 WebStorm)
用于设置软键盘回车键的样式,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 时,效果如下图所示。
属性名 | 取值 | 说明 |
---|---|---|
autoCapitalize | enum('none', 'sentences', 'words', 'characters') | 设置英文字母自动大写规则,取值分别表示:不自动大写、每句话首字母自动大写、每个单词首字母大写、全部字母自动大写 |
autoCorrect | bool | 是否会自动检测用户输入的英语单词正确性,默认值为 true |
autoFocus | bool | 如果为 true,在 componentDidMount 后会获得焦点。默认值为 false。 |
defaultValue | string | 字符初始值,当用户开始输入时,该值将改变 |
placeholder | node | 文本输入之前将呈现的字符串,多用于提示用户应该输入什么 |
placeholderTextColor | color | 文本输入之前将呈现的字符串的颜色 |
editable | bool | 是否允许修改字符,默认值为 true |
maxLength | number | 最多允许用户输入多少字符 |
caretHidden | bool | 如果为 true,则隐藏光标 |
multiline | bool | 如果为 true,则文本输入可以是多行的,默认值为 false |
secureTextEntry | bool | 文本框是否用于输入密码,默认值为 false |
selectTextOnFocus | bool | 如果为 true,则文本框获取焦点时,组件中的内容会被自动选中 |
onFocus | function | 当文本框获得焦点的时候调用此回调函数 |
onEndEditing | function | 当文本输入结束后调用此回调函数 |
onLayout | function | 当组件挂载或者布局变化的时候调用,参数为 {x, y, width, height} |
onScroll | function | 在内容滚动时持续调用,传回参数的格式形如 {nativeEvent: { contentOffset: { x, y} } } |
onSelectionChange | function | 长按选择文本时,选择范围变化时调用此函数,传回参数的格式形如 {nativeEvent: { selection: { start, end} } } |
value | string | 文本框中的文字内容 |
属性名 | 取值 | 说明 |
---|---|---|
inlineImageLeft | string | 指定一个图片放置在左侧 |
inlineImagePadding | number | 左侧图片的 Padding(如果有的话),以及文本框本身的 Padding |
numberOfLines | number | TextInput 的行数 |
underlineColorAndroid | string | TextInput 的下划线颜色 |
returnKeyLabel | string | 设置软键盘回车键的内容,优先级高于 returnKeyType |
disableFullscreenUI | bool | 值为 false 时 (默认值),如果 TextInput 的输入空间小,系统可能会进入全屏文本输入模式 |
属性名 | 取值 | 说明 |
---|---|---|
clearButtonMode | enum('never', 'while-editing', 'unless-editing', 'always') | 何时在文本框右侧显示清除按钮 |
clearTextOnFocus | bool | 如果为 true,每次开始输入的时候都会清除文本框的内容 |
keyboardAppearance | enum('default', 'light', 'dark') | 键盘的颜色 |
onKeyPress | function | 一个键被按下的时候调用此回调,传递给回调函数的参数为 {nativeEvent: { key: keyValue} } |
spellCheck | bool | 如果为 false,则禁用拼写检查的样式(比如红色下划线) |
enablesReturnKeyAutomatically | bool | 如果为 true,键盘会在文本框内没有文字的时候禁用确认按钮 ,默认值为 false |
clear 用于清空输入框的内容。
想要使用组件的方法则需要使用组件的引用,例子如下所示。
- ...
- render() {
- return (
- <View style={styles.container}>
- <View style={styles.searchBar}>
- <TextInput style={styles.input} ref="textInputRefer" placeholder='请输入内容' blurOnSubmit={true}
- returnKeyType='send'
- onChangeText={(text) => {
- this.setState({searchText: text});
- }}
- />
- <Button style={styles.button} title='清除'
- onPress={ () => {
- this.refs.textInputRefer.clear();
- }
- }/>
- </View>
- </View>
- );
- }
- ...
在 TextInput 标签中定义引用的名称:
,这样我们通过
- ref="textInputRefer"
就可以得到 TextInput 组件的引用。在 Button 的 onPress 函数中,调用了 TextInput 的 clear 方法,这样当我们点击 "清除" 按钮时,文本框中的内容就会被清除。
- this.refs.textInputRefer
返回值表明当前输入框是否获得了焦点。
好了,到这里 TextInput 组件就介绍到这里,还有一些没有列出的属性请查看官方文档。
参考资料
官方文档
《React Native 跨平台移动应用开发》第二版
《React Native 移动开发实战》
React Native - 组件的引用
来源: http://blog.csdn.net/itachi85/article/details/77434639