React Native之TextInput组件解析示例

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

2 属性

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

2.1 onChangeText

当输入框的内容发生变化时,就会调用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中保存的内容展现出来。

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

React Native之TextInput组件解析示例

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

React Native之TextInput组件解析示例

 

2.2 onChange

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

... <TextInput style={styles.input} placeholder='请输入内容' keyboardType='default' onChange={(event) => { 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是跨平台。

... <TextInput style={styles.input} placeholder='请输入内容' keyboardType='phone-pad' onChangeText={(text) => { this.setState({searchText: text}); }}/> ...

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

React Native之TextInput组件解析示例

2.4 blurOnSubmit

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

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

  

将blurOnSubmit设置为false:

... <TextInput style={styles.input} placeholder='请输入内容' blurOnSubmit={false} onChangeText={(text) => { this.setState({searchText: text}); }}/> ...

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

 

2.5 onSubmitEditing

当提交键被按下时会调用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)

React Native之TextInput组件解析示例

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时,效果如下图所示。

React Native之TextInput组件解析示例

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

React Native之TextInput组件解析示例

2.7 其他跨平台属性

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wygpxz.html