React native之路（十）TextInput

上一篇解释了一下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
　　设定键盘的类型，官方提供了多种设定值，但某些值只准对特定平台生效，不受平台限制的有一下四种

1. default ——默认的输入类型
2. numeric——数字键盘
3. email-address
4. 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大家自行去官网查看吧，这里不再啰嗦了。