一、實例
先看一下我要做的搜索框的樣子
- 需要一個Image，和一個TextInput
- 去掉默認下划線 underlineColorAndroid='transparent'
- 設置光標顏色 selectionColor='#ff4f39'
- 自動獲取焦點 autoFocus={true}
<View style={styles.searchBox}>
<Image source={require('../../img/search.png')} style={styles.searchImg}/>
<TextInput
underlineColorAndroid='transparent'
autoFocus={true}
placeholder='歡聚有味'
placeholderTextColor='#999'
selectionColor='#ff4f39'
style={styles.inputText}
onChangeText={(text) => this.setState({text})}
/>
</View>
樣式
- 在他們的父容器設置 flexDirection: 'row'，讓它們橫着排
- 搜索框本身帶有padding，所以設置padding為0，否則height為30放不下
searchBox:{ flexDirection: 'row', alignItems:'center', backgroundColor:'#fff', width:width*0.9, borderRadius:5, height:30, }, searchImg:{ marginLeft:15, marginRight:10, }, inputText:{ width:width*0.8-50, padding:0, },
二、其他
關於TextInput的其他屬性和用法，可以看這里（http://www.hangge.com/blog/cache/detail_1526.html）
1、組件的通用屬性
（1）autoCapitalize：首字母自動大寫。可選值有：none、sentences、words、characters。
- none：不自動變為大寫
- sentences：將每句話的首字母自動改成大寫
- words：將每個單詞的首字母自動改成大寫
- characters：將每個英文字母自動改為大寫
（2）placeholder：占位符，在輸入前顯示的文本內容。
（3）value：用來設置 TextInput 組件內字符串的值。
- 要慎重使用這個屬性，因為它有可能會帶來屏幕顯示閃爍。
- 官方更推薦使用 editable 屬性和 defaultValue 屬性來達到相同的效果。
- 當然如果應用需要突然改變 TextInput 組件內字符串的值，還是需要使用這個屬性。
（4）placeholderTextColor：占位符文本的顏色。
（5）password：如果為 true，表示密碼輸入框。文本顯示為“*”
（6）multiline：如果為 true，表示多行輸入。
（7）editable：默認為 true。如果設置為 false 表示不可編輯。
（8）autoFocus：如果為 true，則自動獲取焦點。
（9）maxLength：能夠輸入的最長字符數。
（10）returnKeyType：表示軟鍵盤返回鍵顯示的字符串。可選值如下：
- 跨平台支持的值：done、go、next、search、send
- 僅 Android 支持的值：none、previous
- 僅 iOS 支持的值：default、google、join、route、yahoo、emergency-call
（11）keyboardType：定義了當 TextInput 組件獲得焦點時，將自動彈出哪種軟鍵盤。可選值如下：
- Android、iOS 都支持的：default、numeric、email-address
- 僅支持 iOS：ascii-capable、numbers-and-punctuation、url、number-pad、phone-pad、name-phone-pad、decimal-pad、twitter、web-search
（12）secureTextEntry：默認為 false。如果為 true，則像密碼框一樣隱藏輸入內容。
（13）autoCorrect：如果為 true，則會自動更正用戶輸入的英文單詞是否正確。（默認值：true）
（14）blurOnSubmit：如果為 true，在輸入框輸入完成提交是，文本區域會被模糊化。它的默認值是 TextInput 組件 multiline 屬性的非值。如果一個 TextInput 組件的 multiline 屬性與 blurOnSubmit 都為 true 時，用戶按下鍵盤上的回車鍵會模糊化輸入的文本並觸發 onSubmitEditing 事件，而不是在輸入區域插入新行。
（15）defaultValue：用來定義 TextInput 組件中的字符串默認值。
（16）selectTextOnFocus：當它為 true 時，如果 TextInput 組件獲得焦點，則組件中所有的文字都會被選中。
（17）selection：這個是一個對象類型的屬性。它接受的對象結構為：
- 我們可以用來設置 TextInput 組件中被選擇字符的開始與結束位置。
- 如果把開始位置與結束位置設為同一個值可以達到設置輸入光標至該位置的效果。
（18）selectionColor：用來設置被選中文字的高亮顯示顏色。在 iOS 平台，還可以使用這個屬性設置輸入光標的顏色。
2、組件 iOS 平台專有屬性
（1）clearButtonMode：表示什么時候會顯示清除按鈕。可選值有：never、while-editing、unless-editing、always。
（2）clearTextOnFocus：如果為 true，當用戶點擊 TextInput 組件開始編輯文字時，會自動清除文字區域。
（3）enablesReturnKeyAutomatically：默認為 false。設置為 true 表示沒有輸入文本時返回鍵無法使用。
（4）keyboardAppearance：設置不同的鍵盤顏色。可選值有：default、light、dark，分別表示默認、明亮、偏暗。
3、組件 Android 平台專有屬性
（1）numberOfLines：用來設置 TextInput 組件可以有多少行。
（2）disableFullscreenUI：是否開啟全屏文本輸入模式。默認為 false。
- 當為 false 時，如果手機操作系統發現 TextInput 組件的空間小，可能會讓用戶進入一個全屏文本輸入的模式。
- 當為 true 時，操作系統的這個特性會被關閉，用戶只能在 TextInput 組件中進行輸入。
（3）inlineImageLeft：它必須是 RN 的 Android 工程中的一個圖片資源的名稱。RN 將會把這張圖片無縮放地顯示在 TextInput 組件的左側。
（4）inlineImagePadding：它定義了 inlineImage（如果有的話）的 padding 與 TextInput 組件自己的 padding。
（5）returnKeyLabel：使用這個屬性可以將手機軟鍵盤的回車鍵設為指定的字符串。這個屬性的優先級高於 returnKeyType。
（6）underlineColorAndroid：用來定義輸入提示下划線的顏色。如果將它的顏色設為與 TextInput 組件的背景色一樣，即可以隱藏輸入提示下划線。
4、組件的方法屬性
（1）onChange：當文本發生變化時，調用該函數。
- 它的回調接收一個 event 參數，通過 event.nativeEvent.text 可以獲取用戶輸入的字符串。
（2）onChangeText：當文本發生變化時，調用該函數。
- onChangeText 回調函數與上面的 onChange 類似，但它的好處是直接可以接收用戶輸入的字符串。
（3）onEndEditing：當結束編輯時，調用該函數。
- 它的回調接收一個 event 參數，通過 event.nativeEvent.text 可以獲取用戶輸入的字符串。
（4）onBlur：失去焦點時觸發（在 onEndEditing 之后）。
- 它的回調接收一個 event 參數，通過 event.nativeEvent.text 可以獲取用戶輸入的字符串。
（5）onFocus：獲得焦點時觸發。
- 它的回調接收一個 event 參數，通過 event.nativeEvent.text 可以獲取組件中的字符串（上次輸入的，或者是程序設定的默認值）
（6）onSubmitEditing：當結束編輯后，點擊鍵盤的提交按鈕觸發該事件。
- 它的回調接收一個 event 參數，通過 event.nativeEvent.text 可以獲取用戶輸入的字符串。
當我們通過 multiline={true} 將一個 TextInput 組件設置為多行時，要注意：
- 在 iOS 平台上，這個 TextInput 組件的 onSubmitEditing 事件永遠也不會被觸發，onSubmitEditing 回調函數也永遠不會被執行。
- 在 Android 平台上，用戶每一次按下回車鍵后，onSubmitEditing 事件都會被觸發，但輸入框中的字符串會增加一個回車換行，同時輸入框會繼續保持住焦點，不會失去焦點。
（7）onSelectionChange：當用戶在文本輸入框中選擇的字符串發生改變時觸發。
- 該回調函數會傳入一個 event 參數，通過這個參數我們可以得到用戶在輸入框中選擇一段字符串這個事件發生的時間，以及選擇的子字符串在輸入框中的起點位置與結束位置。
- 當用戶移動輸入光標時，這個事件也會被觸發。比如我們將 TextInput 組件的輸入光標移動到最開始位置，那么 event.nativeEvent.selection.start 和 event.nativeEvent.selection.end 的值都是 0。
（10）onScroll：在 TextInput 組件滾動時會被調用。它的參數是一個對象，我們可以從中得到組件當前滾動的位置。
（11）onSelectionChange：會在 TextInput 組件的選中字符被改變時調用。它的參數是一個對象，我們可以通過其得到用戶選擇的字符串。
5、組件的成員函數
（1）isFocused()
當得到一個 TextInput 組件的引用后，通過這個方法可以判斷當前這個 TextInput 組件是否獲得焦點。
this.refs.aTextInputRef.isFocused();
（2）clear()
當得到一個 TextInput 組件的引用后，通過這個方法可以將 TextInput 組件中的字符串清空。
this.refs.aTextInputRef.clear();