React Native小菜雞的踩坑排雷記錄（5）

一、安卓機型不顯示

這一期我們團隊把安卓也加進來，一起用RN實現頂層的業務代碼，這對安卓同學來說，簡直是一個好消息，只用做下底層的橋接。但是，對於我來說，就有點。。咳咳～～，說啥呢，都是可以兼容的～。“有條件，我們要上。沒有條件，我們創造條件也要上！”
前期，都是拿着ios模擬器，適配下iphoneX和普屏的iphone。實現還是好辦的。所有業務CASE跑通後，測了下安卓效果。
“咦？怎麼很多內容都不顯示了。”心裏一陣嘀咕，看了下數據返回，有的。我勒個擦，冷靜～。
一通排查後，發現是安卓默認字體顏色是白色，所以一些白底黑字（#000000）就顯示不出來了。
還有一些其他的樣式（lineHeight等，有些會把字體內容截斷，flexWrap有些舊機型舊版本也不兼容等等），要做Platform的判斷，做對應的樣式。對於一些太遠古時代的機型，可以放棄兼容了。成本太高～～（我們測試機居然有一個安卓5的機子，把人整死～。～）

二、ant-design

做了這幾期需求，感覺ant-design的RN版，有些組件不是很好用，選了以後，最後還是要重新找組件或者自己手擼。有點難受～。
好在現在的生態比較成熟了，很多組件以及優化後的高效版都可以搜到。（要肯去發現，肯去找。哈哈，一切都要精益求精，我們團隊都是一像素也不放過的，真的讓我有點不太適應。畢竟原來的app項目都是給公司內部員工用的，所以要求沒有那麼高。。respect！！）

• Modal 陰影框就會顯示不了全屏。一些導航上的內容遮蓋不了，有時也會出現dialog的抖動問題。
• List和List.Item的onpress事件不是很靈敏，感覺每次都要點擊兩次，才能觸發。
• Toast 用起來也不是很方便。不能向Web上的組件一樣，隨時使用。
• 還有些ant-design的集體問題，還是樣式太收斂了。這個前面一篇也有講到。不是很方便，且層級過多。

解決方法，就是換組件或者手擼啦～～

• react-native-modal解決問題。一些動畫取消的話，可以將時間設置爲1.
• List.Item直接用Touchable系列組件就行。一般像List這樣的表單，都可以用TouchaleHighLight來解決，上代碼：

// callback 點擊事件   imgNode Item上的圖標  
// title Item的label   isLast  是不是最後一個元素，來判斷是否要border
renderItem = (callback, imgNode, title, isLast = false) => {
   return (
     <TouchableHighlight
       underlayColor={"#00000017"} //按下的遮罩顏色
       style={_styleSheet["itemStyle"]}
       onPress={callback}
     >
       <View
         style={{
           ..._styleSheet["flexRow"],
           borderBottomWidth: isLast ? 0 : 0.5,
           borderColor: "#e5e5e5",
           marginLeft: scaleWidth(32),
         }}
       >
         <Image source={imgNode} style={_styleSheet["itemIcon"]} />
         <Text style={_styleSheet["itemText"]}>{title}</Text>
         <Image
           source={require("@/src/assets/images/bill/arrow.png")}
           style={_styleSheet["arrow"]}
         />
       </View>
     </TouchableHighlight>
   );
 };

用這個確實很有效，方便。不會再出現上一版，點擊好幾次，觸發一次的尷尬問題了。完美！！

• Toast我用的是react-native-root-tips這個組件，不過由於項目的一些需求，就把他單獨改裝了下。不過，react-native-root-tips已經很不錯了。

三、組件上傳類的圖像問題

首先，我們可以將一個移動端的圖片上傳需求分爲以下部分：

1. 彈出ActionSheet框，提示多種方式的圖片，一般是拍攝和從相冊獲取。
2. 顯示預覽功能。
3. 分批上傳，圖像壓縮。
4. 回顯已傳圖片。
5. 大量圖片的展示瀑布流問題。

先講講這裏面遇到的一些問題，以及怎麼解決的，並有一些是以後會去優化的地方。

• 這個沒什麼可以說的，直接組件調用就好了。不過，這裏也沒有用ant-design，而是react-native-actionsheet。主要講拍攝和相冊選取，因爲業務需要，從相冊選取一次最多九張，所以，開始選擇的react-native-image-crop-picker，在 maxFiles: 9,這個字段裏限制張數的，但頭疼的是，這個字段只支持ios。後面我們安卓同學也給予了支持。大家用的時候，要注意～。拍攝的話，我們選取的是react-native-camera，單獨繪製了一個拍照頁面，因爲需求是可以連拍，並在頁面顯示一排已拍攝的圖片。點擊“添加”後，圖片以瀑布流的形式展示。
  
• 考慮到業務會出現上傳圖片有個三四十張，所以滑動list的性能還是要考慮的。所以，這個由最初的scrollView —> RecyclerListView 這個組件可以將視圖中的元素塊重用，而不是丟棄再新建，所以性能提高很明顯。只是又一個小問題，這個只適用於Item height確定的list。
• 預覽的話，安卓和ios取本地文件的時候，前面的file:///前綴不一致。這個用到的時候，要注意統一處理下。本地的圖片，Image回顯還是比較快的，但是對於一個遠程的Url，就慢了許多，可以說是不可接受了。這裏我做的優化，就是react-native-fast-image，將header和priority作爲屬性，具體用法：

 <FastImage
   style={img.style}
   source={
     c.url
       ? {
           uri: c.url,
           priority: FastImage.priority.high,
           headers: {
             token: currentUserToken(),
           },
         }
       : require("@add.png")
   }
/>

效果比原先的Image，好了些，但是還不夠到上線的感覺。第一感覺，就是url變了，導致我們每次都是重新獲取，並沒有去取緩存。最終，和後端達成一致，他返回給我的是一個壓縮過後的縮略圖，爲了保證阿里雲那邊將地址url又覆蓋重寫，加了個redirect重定向。效果好了很多。最終優化：在圖片顯示前，給個灰色的底圖佔位或者加個loading，onload後直接替換。perfect～

發現圖片這一環節有很多可以優化的地方，像一些分批壓縮上傳這些有的在選圖的組件裏就封裝了的，不過一般只有一層，只是一個壓縮比。但是有時候，我們一個上傳的時候，往往要的是一張圖片限制最大有多大。所以，這裏可以考慮加個while循環壓縮，類似：

const maxSize = 10240
const pressPercent = 0.7
while(img.imgSize >= maxSize){
	foo(img.imgSize,pressPercent)   // return img  對象
}

當然，這個pressPercent是要根據業務需求和技術實現，進行調整的。太大了，傳輸效率也不是很高，太小上傳圖片過於模糊。

以上，爲我現階段整理的部分，只是想記錄以下自己遇到的RN裏的一些坑點，分享給大家，也希望和大家多交流～～主要是圖片和安卓的方面多一些！

一起進步，奧利給！！