摘要：傳給回調(diào)函數(shù)的里，包含一個觸摸事件參數(shù)。官網(wǎng)的版文檔中，和組件中都有屬性，這個屬性接收一個回調(diào)函數(shù)，函數(shù)原型是，在組件和的組件的時候觸發(fā)該事件，傳給回調(diào)函數(shù)的里，參數(shù)，其中的屬性為該組件的。

由于手機屏幕高度不定，做表單頁面時，外層通常加上ScrollView組件，使其能夠適應(yīng)屏幕進行滾動。業(yè)務(wù)需要里面放置多個TextInput組件。

出現(xiàn)的問題是，首次點擊focus TextInput，鍵盤彈出，然后想要點擊連續(xù)focus TextInput時，結(jié)果沒有focus，而是鍵盤收起，需要再次點擊TextInput 進行focus。

               結(jié)果就是每次切換輸入框都需要點擊兩次。

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

保持鍵盤一直展開，然后點擊的時候，能夠判斷點擊的組件是否為TextInput，如果是則鍵盤不收起，否則鍵盤收起。

閱讀ScrollView的源碼可以發(fā)現(xiàn)，它有一個屬性keyboardShouldPersistTaps，默認值為false，表示只要點擊當前focus組件外的地方，都會引起鍵盤的收起。

這個是不能連續(xù)focus TextInput的原因，引起鍵盤收起后，還捕獲了點擊事件，使得focus失效。 所以我們應(yīng)該把ScrollView的這個屬性設(shè)置為 true，讓鍵盤一直保持彈出狀態(tài)。

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

"none" 是默認值，代表鍵盤一直展開

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

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

但是發(fā)現(xiàn)在android和ios下也沒什么效果

嘗試著用這個屬性去收起鍵盤，但是效果不好，并且不兼容android。

最終我們對ScrollView的操作是加上屬性 keyboardShouldPersistTaps = true

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

閱讀View的原文我們可以發(fā)現(xiàn)屬性 onStartShouldSetResponderCapture，這個屬性接收一個回調(diào)函數(shù)，函數(shù)原型是 function(evt): bool，在觸摸事件開始（touchDown）的時候，RN 容器組件會回調(diào)此函數(shù)，詢問組件是否要劫持事件響應(yīng)者設(shè)置，自己接收事件處理，如果返回 true，表示需要劫持，如果返回false，表示不劫持。

傳給回調(diào)函數(shù)的event里，包含一個觸摸事件參數(shù)nativeEvent。nativeEvent 的詳細內(nèi)容如下：

identifier：觸摸的 ID，一般對應(yīng)手指，在多點觸控的時候，用來區(qū)分是哪個手指的觸摸事件；

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

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

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

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

changedTouches：evt數(shù)組，從上次回調(diào)上報的觸摸事件，到這次上報之間的所有事件數(shù)組。因為用戶觸摸過程中，會產(chǎn)生大量事件，有時候可能沒有及時上報，系統(tǒng)用這種方式批量上報；

touches：evt 數(shù)組，多點觸摸的時候，包含當前所有觸摸點的事件。
這里我們用到的是target屬性，它就代表點擊的組件ID。

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

  所以可以在TextInput組件layout時，將他們的ID存放在數(shù)組中，然后判斷觸發(fā)事件的組件ID是否在數(shù)組中，來確定該組件時候為TextInput。
  
  React-Native官網(wǎng)的0.28版文檔中，View和TextInput組件中都有屬性onLayout，這個屬性接收一個回調(diào)函數(shù)，函數(shù)原型是 function(evt)，在mount組件和layout的組件的時候觸發(fā)該事件，傳給回調(diào)函數(shù)的event里，參數(shù)nativeEvent，其中的target屬性為該組件的ID。
  
  所以可以在TextInput組件layout時，將他們的ID存放在數(shù)組中，然后判斷觸發(fā)事件的組件ID是否在數(shù)組。
  
  0.28版本之前 TextInput組件沒有onLayout屬性，所以在0.28版本中TextInput沒有onLayout屬性，hack的方法是用View包裹TextInput，然后給View加onLayout屬性，

獲取到的是View的組件ID，調(diào)試發(fā)現(xiàn)，View里面的TextInput的ID是外層View的ID+1，通過這種方法獲取的TextInput的組件ID，在0.29以后的版本中，可以直接給TextInput加onLayout屬性了。

 react-native 中有dismissKeyboard模塊，用于設(shè)置鍵盤的收起，直接調(diào)用該模塊方法，即可收起鍵盤。

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);
    }