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 | 內容長度發生變化的時候調用 |
0.34版本, Android端添加了controlled selection屬性
詳情:
Add TextInput controlled selection prop on Android (<tt>3c1b69c</tt>) - @janicduplessis
下面的例子
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);
兩個平臺不同表現
對比發現 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平臺上，沒有指定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組件的生命周期和回調方法
1. 當用戶點擊輸入框時，onFocus調用，獲取焦點
2. 當用戶輸入的時候onChangeText和onChange回調，一般使用onChangeText，里面參數為輸入的文本
3. 當用戶按下提交鍵，onSubmitEditing回調，多行沒有提交鍵
4. 當組件失去焦點，onEndEditing或onBlur調用，一般情況用onEndEditing就足夠了
注意：當點擊點擊另一個TextInput組件時會觸發失去焦點事件，**在單行的輸入框中按下提交鍵，Android端不觸發失去焦點事件。**
最方便的操作就在onChangeText事件中時刻獲取用戶輸入的內容
更多精彩請關注微信公眾賬號likeDev
