[原創]最近使用React-Native的適配問題和警告蒐集

主要記錄一下最近使用RN 0.29.2版本遇到的適配的坑以及部分警告的解法。

 

適配類：

1. 安卓輸入框圓角、邊框顏色、粗細等沒法設置成功，須要在TextInput外面新增一個View設置圓角，TextInput自己設置背景透明能夠解決。
2. lineHeight樣式在安卓上不能爲小數，不然崩潰。
3. TextInput的editable屬性設置以後即使爲true，iOS的清空按鈕也不能點。workaround：不設置editable，經過不更新state來限制輸入。
4. Text的numberOfLines設爲0的話iOS不限行數，Android則不顯示任何內容。可將該值設置爲一個較大數如跟字數限制相等。
5. Image的resizeMode設爲stretch則安卓的borderRadius樣式圓角針對的是圖片的原始尺寸，設爲cover則針對style中的高寬。iOS無此問題，均針對Image控件自己。
6. ListView的onResponderMove事件在Android不觸發，須要設置onMoveShouldSetResponderCapture, 若返回true則小米的ListView響應onResponderMove事件但三星仍然不行，但具體看業務可能能夠用onMoveShouldSetResponderCapture取代onResponderMove來完成Android上的邏輯，返回false便可。onMoveShouldSetResponderCapture不影響iOS。
7. KeyboardAvoidingView在iOS和Android上表現不盡相同，須要render不一樣的view hierarchy。具體請查看TweetCommentEdtor代碼。另外在Android上如有TextInput會顯示不正確，鍵盤會一直覆蓋到TextInput輸入區域下面（受到windowSoftInputMode屬性影響）。詳見FB的這條pull：https://github.com/facebook/react-native/pull/8889 ， 另外下面有個人評論和解決方案（id：cmmobiraoxin）。
   

 

警告類：

1. ListView的renderRow警告須要key，設置renderRow中的component的key屬性是沒用的，須要設置renderSeparator中的component的key屬性。一樣的往一個Array中push多個component，須要每一個component都有key屬性且不可重複。
2. 新出的ActivityIndicator兼容iOS和Android，能夠替換掉ActivityIndicatorIOS和ProcessBarAndroid。
3. 使用Promise部分中的callback代碼錯誤會變爲警告。Promise的設計能夠替代回調，所以應該將Promise返回給調用者，使其能夠繼續使用.then來進行後續處理和使用.catch來處理異常狀況。