《React-Native系列》45、踩坑記錄

記錄幾個最近在項目中遇到的坑，RN版本使用0.29.2。

1、在Android平台上Text标簽的 lineHeight 需要設定成int ，否則會crash；在iOS平台上沒有問題。

如下圖：

com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `int64', but had type `double'
    at com.facebook.react.bridge.ReadableNativeMap.getInt(Native Method)
    at com.facebook.react.uimanager.ReactStylesDiffMap.getInt(ReactStylesDiffMap.java:67)
           

2、View标簽的borderWidth問題

譬如：我們需要将View的邊框設定為1px，在iphone6 和iphone6 plus上像素密度是不一樣的。

在項目中我們剛開始統一将項目密度設定為2，這樣對應的效果是，在iphone6 plus和部分Android手機上實際borderWidth不是一像素。樣式如下圖：

正确的做法：

borderWidth: 1/PixelRatio.get(),
    borderColor:'#DBDBDB',
           

3、Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

出現這個問題，你必須先了解元件的生命周期

元件的生命周期分為3個部分：
Mounting：正在裝載元件；
Updating：重新計算渲染元件；
Unmounting：解除安裝元件
           

錯誤的字面意思就是： 你在一個被解除安裝的元件裡，還在調用setState方法。

代碼示例：

this.refs.toastIcon.show("儲存成功",2000,0);
                     
 this.timer = setTimeout(()=>{
     let { navigator } = this.props;
     let routers = navigator.getCurrentRoutes();
     navigator.resetTo(routers[0]);
  },1500);
           

這段代碼出現在Form表單送出頁面，和Server端互動完成後， toastIcon元件彈出提示“儲存成功”,元件動畫彈出效果執行時間2000 ms，元件在Form表單頁面中被初始化，然後1500ms後頁面 reset到 navigator的首頁。

問題出現在什麼地方？問題出現在2000 和1500 這兩個數值上。

1500ms後Form表單是會被銷毀的，此時toastIcon元件也被銷毀了。但是被銷毀的元件還在執行動畫，是以就出現了【你在一個被解除安裝的元件裡，還在調用setState方法。】

這個隻是一種場景，其他的場景類似，通常發生在setTimeout、callback、頁面傳回 等。