TextInput 組件是用來通過鍵盤輸入文字，可以使用View組件和Text組件樣式，沒有自己特定的樣式。
與Text組件類似，TextInput組件內(nèi)部的元素不再使用FlexBox布局，而采用文本布局。詳情見上一篇文章從零學(xué)React Native之10Text
TextInput屬性
只列出了一些常用的，詳情見官網(wǎng)
| 屬性名 | 描述 |
| :------------- :|:-------------:|
| defaultValue | 字符類型,定義TextInput組件中的字符串默認(rèn)值 |
| autoCorrect | 布爾類型，是否自動(dòng)更正用戶輸入，默認(rèn)是true |
| autoFocus | 是否自動(dòng)獲取焦點(diǎn)，默認(rèn)為false|
| editable | 布爾類型,是否允許修改組件內(nèi)字符,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 | 數(shù)值類型，定義TextInput最多允許用戶輸入多少個(gè)字符 |
| multiline | 布爾類型，是否允許多行顯示，默認(rèn)值false|
| placeholder | TextInput無文字的時(shí)候顯示的提示內(nèi)容 |
| placeholderTextColor | placeholder文字顏色，建議不用修改 |
| secureTextEntry | 布爾類型 true按照密碼樣式顯示,默認(rèn)是false |
| value | 字符串類型，設(shè)置TextInput里面的值，目前有可能帶來屏幕閃爍，可以用defaultValue臨時(shí)代替|
| onSubmitEditing | 用戶點(diǎn)擊提交鍵的時(shí)候調(diào)用，如果允許多行顯示，該屬性失效 |
| onContentSizeChange | 內(nèi)容長度發(fā)生變化的時(shí)候，只會在多行顯示的時(shí)候生效 |
| onChangeText | 內(nèi)容長度發(fā)生變化的時(shí)候調(diào)用 |
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);
兩個(gè)平臺不同表現(xiàn)
對比發(fā)現(xiàn) Android端 borderWidth是不生效的，默認(rèn)有一個(gè)輸入的線，符合Android設(shè)計(jì)，Android字體默認(rèn)很小，我們把上面樣式中的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，當(dāng)上下padding為0的時(shí)候，height至少是FontSize的1.1倍時(shí)Android端才能保證字體完全顯示。而默認(rèn)Android端是有padding的。
如下面的代碼可以基本適配兩個(gè)平臺：
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組件的生命周期和回調(diào)方法
1. 當(dāng)用戶點(diǎn)擊輸入框時(shí)，onFocus調(diào)用，獲取焦點(diǎn)
2. 當(dāng)用戶輸入的時(shí)候onChangeText和onChange回調(diào)，一般使用onChangeText，里面參數(shù)為輸入的文本
3. 當(dāng)用戶按下提交鍵，onSubmitEditing回調(diào)，多行沒有提交鍵
4. 當(dāng)組件失去焦點(diǎn)，onEndEditing或onBlur調(diào)用，一般情況用onEndEditing就足夠了
注意：當(dāng)點(diǎn)擊點(diǎn)擊另一個(gè)TextInput組件時(shí)會觸發(fā)失去焦點(diǎn)事件，**在單行的輸入框中按下提交鍵，Android端不觸發(fā)失去焦點(diǎn)事件。**
最方便的操作就在onChangeText事件中時(shí)刻獲取用戶輸入的內(nèi)容
更多精彩請關(guān)注微信公眾賬號likeDev
