1.TextInput組件基本介紹:
TextInput是一個允許用戶在應用中通過鍵盤輸入文本的基本組件。本組件的屬性提供了多種特性的配置，譬如自動完成、自動大小寫、占位文字，以及多種不同的鍵盤類型（如純數字鍵盤）等等。
最簡單的用法就是丟一個TextInput到應用里，然后訂閱它的onChangeText事件來讀取用戶的輸入。它還有一些其它的事件，譬如onSubmitEditing和onFocus。一個簡單的例子如下：
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
注意有些屬性僅在multiline為true或者為false的時候有效。此外，當multiline=false時，為元素的某一個邊添加邊框樣式（例如：borderBottomColor，borderLeftWidth等）將不會生效。為了能夠實現效果你可以使用一個View來包裹TextInput：
<View style={{ borderBottomColor: '#000000', borderBottomWidth: 1, }}>
<TextInput {...props} />
</View>
2>屬性
屬性
autoCapitalize enum('none', 'sentences', 'words', 'characters')
控制TextInput是否要自動將特定字符切換為大寫：
characters: 所有的字符。
words: 每個單詞的第一個字符。
sentences: 每句話的第一個字符（默認）。
none: 不自動切換任何字符為大寫。
autoCorrect bool
如果為false，會關閉拼寫自動修正。默認值是true。
autoFocus bool
如果為true，在componentDidMount后會獲得焦點。默認值為false。
blurOnSubmit bool
如果為true，文本框會在提交的時候失焦。對於單行輸入框默認值為true，多行則為false。注意：對於多行輸入框來說，如果將blurOnSubmit設為true，則在按下回車鍵時就會失去焦點同時觸發onSubmitEditing事件，而不會換行。
defaultValue string
提供一個文本框中的初始值。當用戶開始輸入的時候，值就可以改變。
在一些簡單的使用情形下，如果你不想用監聽消息然后更新value屬性的方法來保持屬性和狀態同步的時候，就可以用defaultValue來代替。
editable bool
如果為false，文本框是不可編輯的。默認值為true。
keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')
決定彈出的何種軟鍵盤的，譬如numeric（純數字鍵盤）。
這些值在所有平台都可用：
default
numeric
email-address
maxLength number
限制文本框中最多的字符數。使用這個屬性而不用JS邏輯去實現，可以避免閃爍的現象。
multiline bool
如果為true，文本框中可以輸入多行文字。默認值為false。
onBlur function
當文本框失去焦點的時候調用此回調函數。
onChange function
當文本框內容變化時調用此回調函數。
onChangeText function
當文本框內容變化時調用此回調函數。改變后的文字內容會作為參數傳遞。
onEndEditing function
當文本輸入結束后調用此回調函數。
onFocus function
當文本框獲得焦點的時候調用此回調函數。
onLayout function
當組件掛載或者布局變化的時候調用，參數為{x, y, width, height}。
onSubmitEditing function
此回調函數當軟鍵盤的確定/提交按鈕被按下的時候調用此函數。如果multiline={true}，此屬性不可用。
placeholder string
如果沒有任何文字輸入，會顯示此字符串。
placeholderTextColor string
占位字符串顯示的文字顏色。
secureTextEntry bool
如果為true，文本框會遮住之前輸入的文字，這樣類似密碼之類的敏感文字可以更加安全。默認值為false。
selectTextOnFocus bool
如果為true，當獲得焦點的時候，所有的文字都會被選中。
selectionColor string
設置輸入框高亮時的顏色（在iOS上還包括光標）
style Text#style
譯注：這意味着本組件繼承了所有Text的樣式。
value string
文本框中的文字內容。
TextInput是一個受約束的(Controlled)的組件，意味着如果提供了value屬性，原生值會被強制與value屬性保持一致。在大部分情況下這都工作的很好，不過有些情況下會導致一些閃爍現象——一個常見的原因就是通過不改變value來阻止用戶進行編輯。如果你希望阻止用戶輸入，可以考慮設置editable={false}；如果你是希望限制輸入的長度，可以考慮設置maxLength屬性，這兩個屬性都不會導致閃爍。
iosclearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')
是否要在文本框右側顯示“清除”按鈕。
iosclearTextOnFocus bool
如果為true，每次開始輸入的時候都會清除文本框的內容。
iosenablesReturnKeyAutomatically bool
如果為true，鍵盤會在文本框內沒有文字的時候禁用確認按鈕。默認值為false。
ioskeyboardAppearance enum('default', 'light', 'dark')
指定鍵盤的顏色。
iosonKeyPress function
當一個鍵被按下的時候調用此回調。被按下的鍵會作為參數傳遞給回調函數。會在onChange之前調用。
iosreturnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')
決定“確定”按鈕顯示的內容。
iosselectionState DocumentSelectionState
參見DocumentSelectionState.js，可以控制一個文檔中哪段文字被選中的狀態。
androidnumberOfLines number
設置輸入框的行數。當multiline設置為true時使用它，可以占據對應的行數。
androidunderlineColorAndroid string
文本框的下划線顏色(譯注：如果要去掉文本框的邊框，請將此屬性設為透明transparent)。
3>方法:
isFocused(): boolean # 返回值表明當前輸入框是否獲得了焦點。 clear() 清空輸入框的內容。
4>實現:
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TextInput, } from 'react-native'; class ViewDemo extends Component { render() { return ( // 一定要設置樣式和寬高,TextInput才能顯示出來 <View style ={styles.container}> <TextInput style = {styles.inputStyle} // 鍵盤類型 keyboardType = {'number-pad'} // 默認文字 注意默認文字是不能刪除的 value = {'我是默認文字'} // // 多行顯示 multiline = {true} // // 密碼輸入 注意和multiline沖突 password = {true} // // 占位字符 palceholder = {"請輸入"} // // 清除按鈕 clearButtonMode = {'always'} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5fcff', }, inputStyle: { // 間距 marginTop: 25, // 背景顏色 backgroundColor: 'red', // 邊框 borderWidth: 1, // 寬度 width: 300, // 高度 height: 60, borderColor: '#ebebeb' }, }); AppRegistry.registerComponent('ViewDemo', () => ViewDemo);