TextInput 组件是用来通过键盘输入文字，可以使用View组件和Text组件样式，没有自己特定的样式。
与Text组件类似，TextInput组件内部的元素不再使用FlexBox布局，而采用文本布局。详情见上一篇文章从零学React Native之10Text
TextInput属性
只列出了一些常用的，详情见官网
| 属性名 | 描述 |
|---|---|
| defaultValue | 字符类型,定义TextInput组件中的字符串默认值 |
| autoCorrect | 布尔类型，是否自动更正用户输入，默认是true |
| autoFocus | 是否自动获取焦点，默认为false |
| editable | 布尔类型,是否允许修改组件内字符,false代表不能修改 |
| keyboardType | 字符串类型，取值包括’default’, ‘email-address’, ‘numeric’, ‘phone-pad’, （ ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’）括号里的只支持ios平台 |
| MaxLength | 数值类型，定义TextInput最多允许用户输入多少个字符 |
| multiline | 布尔类型，是否允许多行显示，默认值false |
| placeholder | TextInput无文字的时候显示的提示内容 |
| placeholderTextColor | placeholder文字颜色，建议不用修改 |
| secureTextEntry | 布尔类型 true按照密码样式显示,默认是false |
| value | 字符串类型，设置TextInput里面的值，目前有可能带来屏幕闪烁，可以用defaultValue临时代替 |
| onSubmitEditing | 用户点击提交键的时候调用，如果允许多行显示，该属性失效 |
| onContentSizeChange | 内容长度发生变化的时候，只会在多行显示的时候生效 |
| onChangeText | 内容长度发生变化的时候调用 |
下面的例子
class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
render() {
return (
<TextInput
style={{marginTop:100,height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);IOS运行结果：
Android运行结果：
两个平台不同表现
对比发现 Android端 borderWidth是不生效的，默认有一个输入的线，符合Android设计，Android字体默认很小，我们把上面样式中的height换成fontSize，来看下
<TextInput
style={{marginTop:100,fontSize: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>可以看到Android端字体变大了，但是IOS端没有了
左面是IOS右面Android
IOS平台上，没有指定height，TextInput组件不会显示。
一般情况下，我们需要指定FontSize和height，当上下padding为0的时候，height至少是FontSize的1.1倍时Android端才能保证字体完全显示。而默认Android端是有padding的。
如下面的代码可以基本适配两个平台：
render() {
return (
<TextInput
style={{marginTop:100,
fontSize:30,height:43,
borderColor: 'gray', borderWidth: 1,
paddingBottom:5,paddingTop:5}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}TextInput组件的生命周期和回调方法
- 当用户点击输入框时，onFocus调用，获取焦点
- 当用户输入的时候onChangeText和onChange回调，一般使用onChangeText，里面参数为输入的文本
- 当用户按下提交键，onSubmitEditing回调，多行没有提交键
- 当组件失去焦点，onEndEditing或onBlur调用，一般情况用onEndEditing就足够了
注意：当点击点击另一个TextInput组件时会触发失去焦点事件，在单行的输入框中按下提交键，Android端不触发失去焦点事件。
最方便的操作就在onChangeText事件中时刻获取用户输入的内容
更多精彩请关注微信公众账号likeDev
