簡書 i蒹葭從風(fēng)
轉(zhuǎn)載請注明原創(chuàng)出處，謝謝佑淀！
如果讀完覺得有收獲的話，歡迎點贊加關(guān)注
最近公司的App開始用ReactNative 一下簡稱RN重構(gòu)了伸刃，首先我們是拿首頁開刀的，其實之前有一個優(yōu)惠券列表頁面已經(jīng)用ReactNative實現(xiàn)了景图，不過訪問量實在是太小了，看不出RN和Hybrid App 的優(yōu)缺點挚币，所以這次用了首頁來重構(gòu)。
其中首頁包含一下幾部分妆毕，搜索框激捏，廣告banner设塔，品類远舅，我附近，營銷廣告位图柏，人氣榜，還有未截圖的猜你喜歡模塊蚤吹。
這篇文章随抠，先來介紹textinput的使用繁涂，就拿搜索框來舉例吧。
通過官方文檔可以看出TextInput 的定義扔罪，官方文檔上說明：TextInput是一個允許用戶在應(yīng)用中通過鍵盤輸入文本的基本組件。本組件的屬性提供了多種特性的配置矿酵，譬如自動完成、自動大小寫全肮、占位文字，以及多種不同的鍵盤類型（如純數(shù)字鍵盤）等等辜腺。下面枚舉一些屬性。
autoCapitalize
enum('none', 'sentences', 'words', 'characters')
控制TextInput 是否要自動將特定字符切換為大寫丰包。
autoCorrect bool
如果為false，會關(guān)閉拼寫自動修正邑彪，默認(rèn)為true
blurOnSubmit bool
如果為true，文本框會在提交的時候寄症，失去焦點，對于單行輸入框默認(rèn)值為true有巧，多行則為false悲没。
注意：對于多行輸入框來說篮迎，如果將blurOnSubmit設(shè)為true示姿，則在按下回車鍵時就會失去焦點同時觸發(fā)onSubmitEditing事件，而不會換行栈戳。
defaultValue string
提供一個文本框的初始值，當(dāng)用戶開始輸入的時候子檀，值就開始改變
editable bool
如果為false乃戈，則文本框不可編輯亩进，默認(rèn)為true
keyboardType enum
枚舉類型
enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') #
這個屬性決定彈出的何種軟鍵盤，譬如numeric就是純數(shù)字鍵盤归薛。
一下幾個值是所有平臺都可以使用的，
default
numeric
email-address
maxLength number
限制文本框最多字符數(shù)苟翻。
multiline bool
如果為true文本框可以輸入多行文字骗污，默認(rèn)為false
onBlur function
當(dāng)文本失去焦點的時候，觸發(fā)此回調(diào)函數(shù)
onChange function
當(dāng)文本框發(fā)生變化的時候需忿，調(diào)用此函數(shù)
onChangeText function
當(dāng)文本框內(nèi)容變化時，調(diào)用此函數(shù)屋厘，改變后的文字內(nèi)容會作為內(nèi)容參數(shù)傳遞
仔細(xì)看看和onChange 之間的區(qū)別
onEndEditing function
當(dāng)文本輸入結(jié)束后調(diào)用此函數(shù)
onFocus function
當(dāng)文本獲得焦點的時候，調(diào)用此函數(shù)
onLayout function
當(dāng)組件掛載或者布局發(fā)生變化的時候調(diào)用
onSubmitEditing
此回調(diào)函數(shù)當(dāng)軟鍵盤的回車鍵按下的時候觸發(fā)汗洒。如果multiline=true的時候此屬性不可用
placeholder
如果沒有任何文字輸入，會顯示此字符
placeholderTextColor
占位符顯示文字的顏色
returnKeyType enum
enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')
決定“回車”按鈕顯示的內(nèi)容
一下幾個跨平臺兼容
done
go
next
search
send
enablesReturnKeyAutomatically
如果為true瞻凤，鍵盤會在文本框內(nèi)沒有文字的時候禁用確認(rèn)按鈕。默認(rèn)值為false阀参。
好了說了以上那么多的屬性瞻坝，還有2個靜態(tài)方法
isFocused ()
clear()
這個兩個靜態(tài)方法的使用很簡單蛛壳，獲取textinput組件所刀，然后直接使用。比如
<TextInput
ref='TextInput'
...
...
/>
要是獲取TextInput 組件可以用this.refs.TextInput.isFocused(),或者要清除輸入框內(nèi)容的話浮创，就可以用this.refs.TextInput.clear()就可以把內(nèi)容清除掉。
失去焦點
接下來說一下蒸矛，如果使TextInput 組件失去焦點胸嘴，其實RN不像web開發(fā)一樣斩祭，web開發(fā)劣像，點擊input 框外面就會把input 框失去焦點摧玫，而RN則不會觸發(fā)失去焦點的事件。那么怎么才能使TextInput 框失去焦點呢诬像，其實RN提供了一個Keyboard 組件，
這個組件也提供了一個靜態(tài)方法Keyboard.dismiss();就可以使鍵盤隱藏坏挠，同時失去焦點，是不是很簡單降狠。
輸入框內(nèi)容閃動
看一下這個例子
<TextInput
ref='TextInput'
onFocus={this.onFocus.bind(this)}
onChangeText={this.onChangeText.bind(this)}
value={this.state.value}
....
/>
onChangeText(text){
this.setSate({
value:text
});
}
這個簡單的偽代碼，相信大家會這樣寫否纬。這樣寫在不經(jīng)過http請求的時候，會沒什么問題临燃，如果你的state要經(jīng)過http請求，比如搜索聯(lián)想詞烙心，那么你會發(fā)現(xiàn)你輸入的內(nèi)容會閃動谬俄，因為，你輸入的a弃理，在經(jīng)過render之后，TextInput 組件又重現(xiàn)渲染了一次痘昌，所以value這個會閃動，尤其是網(wǎng)絡(luò)情況不好的狀態(tài)下辆苔，更為明顯。那么怎么解決這個問題呢菲驴，那就是TextInput不寫value這個屬性，如果不寫這個屬性赊瞬，而又想拿到輸入的值，有很多種辦法巧涧，其一是放進state，其二是把onChangeText的時候谤绳，保存起來，這樣就不會出現(xiàn)閃動的情況了缩筛。
目前先大致了解一下TextInput這個組件，先挖個坑艺演，下一篇文字會介紹一下，自動聯(lián)想詞這個功能怎么實現(xiàn)。
如果讀完覺得有收獲的話啄寡，歡迎點贊加關(guān)注
您的認(rèn)可是我寫作的最大動力
