【react native】rn踩坑實踐——從輸入框「們」開始

　　由於團隊技術棧變動爲react native，因此開始寫起了rn的代碼，雖然rn與react份數同源，可是因爲有不少native有關的交互和變更，實際使用仍是碰到蠻多問題的，因而便有了這個系列，原本第一篇應該是講如何構建開發調試環境，不過信息量過大，並且筆者對目前的開發調試環境並不算太滿意，因此這裏權且按下不表，便從遇到的第一個完整解決的問題開始行文吧。

　　其實需求很簡單，就是實現多個input組件，容許用戶輸入多組數據，在用戶有輸入內容的時候，右側出現一個「清除」按鈕，當用戶點擊以後，就清除以前輸入的內容，樣式以下：

　　寫了和在H5中基本一致的react代碼以後，在native中表現卻有些奇怪：

　　由於在input中有數據的狀況下，手機默認是彈起鍵盤的，而用戶嘗試點擊「清除」按鈕的時候，第一次會默認收起鍵盤，第二次點擊纔會讓清除功能生效。

　　雖然邏輯上感受這種邏輯並無什麼問題，可是交互上的體驗太奇怪了，通過查詢發現，是筆者將input組件嵌套於ScrollView組件中致使的，由於RN中ScrollView組件在設計中考慮是默認是否在點擊時就收起軟鍵盤（好比要觸發滾動），而它的默認狀態是收起，可是在筆者的場景中，筆者卻不但願這樣的「特性」生效，查閱文檔發現，須要設置這個屬性：

　　當設置爲handled時，當點擊事件被子組件捕獲時，鍵盤不會自動收起。

　　不過僅僅設置還不夠，由於如今鍵盤不會收起了，咱們須要主動的觸發鍵盤收起的事件，即咱們須要在ScrollView內添加TouchableWithoutFeedback組件，給它添加一個onPresss事件，在響應的時候調用Keyboard.dismiss()。

　　整個體驗就好多了代碼以下圖所示:

<ScrollView keyboardShouldPersistTaps="handled">
    <TouchableWithoutFeedback style={{flex: 1}} onPress={()=>{
        Keyboard.dismiss();
    }}
　　　　　
        <InputItems />
        ......
        <InputItems /> 
    </TouchableWithoutFeedback>
</ScrollView>

　　其中InputItems是筆者自定義的組件容器（也就是上面說的帶一個「清除」按鈕的TextInput組件）。

　　在行文結束以前，筆者又碰到了一個RN text組件在android上「不正常換行」問題（和H5的現象還挺像），不過RN並無相似「word-wrap」的屬性，具體要怎麼修復又得細細的翻文檔了。。