React Native 中切換TextInput保持鍵盤展開

一、問題

問題場景：

因爲手機屏幕高度不定，作表單頁面時，外層一般加上ScrollView組件，使其可以適應屏幕進行滾動。業務須要裏面放置多個TextInput組件。

問題描述：

出現的問題是，首次點擊focus TextInput，鍵盤彈出，而後想要點擊連續focus TextInput時，結果沒有focus，而是鍵盤收起，須要再次點擊TextInput 進行focus。

結果就是每次切換輸入框都須要點擊兩次。

問題影響：

這個問題使得app的體驗差到了極點，飽受用戶吐槽。

二、解決方案

2.1 總體思路

保持鍵盤一直展開，而後點擊的時候，可以判斷點擊的組件是否爲TextInput，若是是則鍵盤不收起，不然鍵盤收起。

2.2 解決步驟

1） 在ScrollView中如何保持鍵盤一直展開

閱讀ScrollView的源碼能夠發現，它有一個屬性keyboardShouldPersistTaps，默認值爲false，表示只要點擊當前focus組件外的地方，都會引發鍵盤的收起。

這個是不能連續focus TextInput的緣由，引發鍵盤收起後，還捕獲了點擊事件，使得focus失效。 因此咱們應該把ScrollView的這個屬性設置爲 true，讓鍵盤一直保持彈出狀態。

它還有一個屬性keyboardDismissMode，是枚舉類型： 表明鍵盤在drag的時候是否收起

'none' 是默認值，表明鍵盤一直展開

'on-drag' 表明 ScrollView拖動的時候 鍵盤收起 在android下無效

'interactive' 翻譯過來是互動的時候鍵盤收起

可是發如今android和ios下也沒什麼效果

嘗試着用這個屬性去收起鍵盤，可是效果很差，而且不兼容android。

最終咱們對ScrollView的操做是加上屬性 keyboardShouldPersistTaps = true

如何判斷點擊到的組件是TextInput ？

2）如何獲取觸摸事件的ID

閱讀View的原文咱們能夠發現屬性 onStartShouldSetResponderCapture，這個屬性接收一個回調函數，函數原型是 function(evt): bool，在觸摸事件開始（touchDown）的時候，RN 容器組件會回調此函數，詢問組件是否要劫持事件響應者設置，本身接收事件處理，若是返回 true，表示須要劫持，若是返回false，表示不劫持。

傳給回調函數的event裏，包含一個觸摸事件參數nativeEvent。nativeEvent 的詳細內容以下：

• identifier：觸摸的 ID，通常對應手指，在多點觸控的時候，用來區分是哪一個手指的觸摸事件；

• locationX 和 locationY：觸摸點相對組件的位置；

• pageX 和 pageY：觸摸點相對於屏幕的位置；

• timestamp：當前觸摸的事件的時間戳，能夠用來進行滑動計算；

• target：接收當前觸摸事件的組件 ID；

• changedTouches：evt數組，從上次回調上報的觸摸事件，到此次上報之間的全部事件數組。由於用戶觸摸過程當中，會產生大量事件，有時候可能沒有及時上報，系統用這種方式批量上報；

• touches：evt 數組，多點觸摸的時候，包含當前全部觸摸點的事件。
  這裏咱們用到的是target屬性，它就表明點擊的組件ID。

3）如何根據組件ID知道組件是否爲TextInput

React-Native官網的0.28版文檔中，View和TextInput組件中都有屬性onLayout，這個屬性接收一個回調函數，函數原型是 function(evt)，在mount組件和layout的組件的時候觸發該事件，傳給回調函數的event裏，參數nativeEvent，其中的target屬性爲該組件的ID。

  因此能夠在TextInput組件layout時，將他們的ID存放在數組中，而後判斷觸發事件的組件ID是否在數組中，來肯定該組件時候爲TextInput。
  
  React-Native官網的0.28版文檔中，View和TextInput組件中都有屬性onLayout，這個屬性接收一個回調函數，函數原型是 function(evt)，在mount組件和layout的組件的時候觸發該事件，傳給回調函數的event裏，參數nativeEvent，其中的target屬性爲該組件的ID。
  
  因此能夠在TextInput組件layout時，將他們的ID存放在數組中，而後判斷觸發事件的組件ID是否在數組。
  
  0.28版本以前 TextInput組件沒有onLayout屬性，因此在0.28版本中TextInput沒有onLayout屬性，hack的方法是用View包裹TextInput，而後給View加onLayout屬性，

獲取到的是View的組件ID，調試發現，View裏面的TextInput的ID是外層View的ID+1，經過這種方法獲取的TextInput的組件ID，在0.29之後的版本中，能夠直接給TextInput加onLayout屬性了。

4）如何控制鍵盤的收起

react-native 中有dismissKeyboard模塊，用於設置鍵盤的收起，直接調用該模塊方法，便可收起鍵盤。

2.3 關鍵代碼

const dismissKeyboard = require('dismissKeyboard');
const inputComponents = [];
  
    _onStartShouldSetResponderCapture (event) {
        let target = event.nativeEvent.target;
        if(!inputComponents.includes(target)) {
            dismissKeyboard();
        }
        return false;
    }
 
    _inputOnLayout(event){
        inputComponents.push(event.nativeEvent.target);
    }
  
<ScrollView ref="scrollView" keyboardShouldPersistTaps = {true} >
    <View onStartShouldSetResponderCapture={this._onStartShouldSetResponderCapture.bind(this)}>
          <TextInput onLayout={this._inputOnLayout.bind(this)} style={{flex: 1}}/>
    </View>
</ScrollView>