大家好，今天講下在開發RN過程中使用ScrollView控制元件出現的問題。
最初的開發需求是顯示一個介面，這個介面有兩個特點:


1)縱向很長，顯示的內容有點多
2)介面的下半部分中有TextInput控制元件


要想滿足第一個條件，首先想到的是將顯示的這些內容最外層加上一層ScrollView控制元件包裹，經過測試，確實是可以的。
TextInput控制元件後面根了一個刪除按鈕，刪除按鈕預設隱藏，當TextInput中輸入內容後，刪除按鈕顯示，此時點選刪除按鈕時要刪除TextInput中的內容，後來在測試時發現刪除按鈕就是點不中，其實就是不能獲得焦點。
經過查資料，發現ScrollView控制元件中有個屬性，keyboardShouldPersistTaps,先看下官網的講解：


keyboardShouldPersistTaps enum('always', 'never', 'handled', false, true) 


如果當前介面有軟鍵盤，那麼點選scrollview後是否收起鍵盤，取決於本屬性的設定。（譯註：很多人反應TextInput無法自動失去焦點/需要點選多次切換到其他元件等等問題，其關鍵都是需要將TextInput放到ScrollView中再設定本屬性）


'never'（預設值），點選TextInput以外的子元件會使當前的軟鍵盤收起。此時子元素不會收到點選事件。
'always'，鍵盤不會自動收起，ScrollView也不會捕捉點選事件，但子元件可以捕獲。
'handled'，當點選事件被子元件捕獲時，鍵盤不會自動收起。這樣切換TextInput時鍵盤可以保持狀態。多數帶有TextInput的情況下你應該選擇此項。
false，已過期，請使用'never'代替。
true，已過期，請使用'always'代替。


也就是說只需要設定此屬性為always就可以解決ScrollView中的子控制元件不能獲得焦點的問題了，經過測試，問題確實解決了。
後來測試又說，希望在彈出鍵盤的時候，點選TextInput控制元件外面的空白的地方希望鍵盤能夠收起(安卓上的鍵盤還好，鍵盤有收起鍵，Ios上沒有獲得至少我還沒發現，有發現的告訴我)
好吧，測試的提出問題來了，那就得解決啊！！！


其實也很簡單，在ScrollView中第一層先包一個點選事件，然後點選事件設為空實現就可以了，大概看起來的樣子是這樣的。


<ScrollView style={styles.flex_style} keyboardShouldPersistTaps={always}>
    <TouchableOpacity activeOpacity={1.0} onPress={this.dismissKeyboardClick.bind(this)}>
       //TextInput 控制元件相關
       
    </TouchableOpacity>
</ScrollView>

解決點選空白處鍵盤關閉的問題:

在點選事件中如果呼叫關閉鍵盤API就可以，使用也很簡單，先引入

var dismissKeyboard = require('dismissKeyboard');

在點選事件中呼叫

dismissKeyboard();

注意:如果點選事件控制元件使用的是TouchableOpacity,如果不想看到點選效果的話，記得設定啟用的透明度為1.0，OK!今天就到這裡!