【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”的屬性，具體要怎么修復又得細細的翻文檔了。。