上一篇解释了一下State,这一篇趁热打铁说一下TextInput,因为TextInput的使用离不开State(其实好多组件都离不开)。
TextInput字面翻译为文字输入,其实他的作用就是接受用户输入的文本信息,就好像是Android中的EditText。
还是来看例子
class MyTextInput extends Component{
constructor(props) {
super(props);
this.state = {text:''};
}
render() {
return (
<View style={{padding:10}}>
<TextInput
style={{height:40}}
placeholder="单击这里输入文本"
onChangeText={(text)=>this.setState({text})}>
</TextInput>
<Text>{this.state.text}</Text>
</View>
);
}
}
我们自定义了一个MyTextInput组件
在MyTextInput的构造函数中声明了一个名为text的state,在render函数中的TextInput 下有一个placeholder属性,这个属性设置的是没有信息输入时默认显示的文本,蕾西EditText的android:holder属性,此外还有一个onChangeText属性,当用户输入的信息改变时this.setState会把当前用户输入的文本赋值给this.state.text。所以我们在TextInput节点后又增加了一个Text,用于显示this.state.text的值。具体运行效果如下:
以上就是TextInput的最基本使用方法,下面再看看TextInput的其他几个重要Propes
1. value
value的作用是强制设定TextInput的值并且处于不可编辑状态,在某些项目中可能会使用到,但是在我测试过程中模拟器和真机都出现了闪烁的情况,官网针对这种情况也做了说明,所以官网建议如果需要TextInput处于不可编辑状态可以设置editable={false}或者通过maxLength 限定TextInput的输入长度来达到目的。这里不再用代码说明。
2. keyboardType
设定键盘的类型,官方提供了多种设定值,但某些值只准对特定平台生效,不受平台限制的有一下四种
- default ——默认的输入类型
- numeric——数字键盘
- email-address
- phone-pad
<TextInput
placeholder="单击这里输入文字"
onChangeText={(text)=>this.setState({text})}
keyboardType="numeric"
>
</TextInput>
3. multiline
如果值为真,文本输入可以输入多行,默认值为假。
<TextInput
placeholder="单击这里输入文字"
onChangeText={(text)=>this.setState({text})}
multiline = {true}
>
</TextInput>
实际测试过程中发现这样一个问题,在multiline 为true的情况下按回车键软键盘被收起并没有切换到下一行,只有当当前行显示不下才会自动切换到下一行去。
其他的的Propes大家自行去官网查看吧,这里不再啰嗦了。