react native 0.49.5 報錯/注意事項集錦(持續(xù)更新)

歡迎大家 ?? 收藏,遇到問題在此頁面 command + F 說不定你遇到的問題已經(jīng)有解決方案了,如果有問題可以在下方評論,嘿嘿,(??ˇoˇ??)

image.png
  • react native cached bundles

出現(xiàn)原因:

(??ˇ_ˇ??)
多個react native應用來回切換使用 Debug JS Remotely遠程調試.

解決方案:

(??ˇoˇ??)
清一下Chrome瀏覽器的緩存就可以了。

image.png
  • No bundle URL present Make sure you’re running a packager server or have included a .jsbundle file in your application bundle

出現(xiàn)原因:

(??ˇ_ˇ??)
這個錯誤一般在ios模擬器和真機上會遇到,網(wǎng)上看到原因有很多種,這里不詳細說明。

解決方案:

(??ˇoˇ??)

  • 首先,你的項目中是否使用了http的請求,如果使用了,請配置
    image.png

    配置完成后重新關閉 React PackagerReact Packager是啥?答:執(zhí)行react-native run-ios 后自動啟動命令窗口,然后再重新運行react-native run-ios。
    image.png
  • 如果以上方法還是報錯的話,刪除工程目錄下 ios文件夾下的build文件夾,關閉React Packager,然后再次運行react-native run-ios
    以上兩個方法就是我的解決方案,希望能幫助到各位。
30D88314-0286-4531-A087-F6463E353360.png
  • ExceptionsManager.js:73 Raw text cannot be used outside of a <Text> tag. Not rendering string: ''

出現(xiàn)原因:

(??ˇ_ˇ??)
設置了 跳轉的當前界面navigationOptions title或者headerTitle為空字符串了。

解決方案:

(??ˇoˇ??)
默認不設置或者設置不為空的字符串。

WechatIMG61.jpeg

WechatIMG62.jpeg
  • 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.

出現(xiàn)原因:

(??ˇ_ˇ??)
我們在該組件還沒裝載完成之前調用了該組件setState方法,一般這種錯誤會出現(xiàn)在很多異步的操作中,比如fetch操作,雖然這是一個警告其實是個致命錯誤,警告之后再次操作就會報錯。

解決方案:

(??ˇoˇ??)
在組件裝載完成的componentDidMount方法里做setState操作。

  • ios上http的圖片顯示不出來

出現(xiàn)原因:

(??ˇ_ˇ??)
在iOS9之后,網(wǎng)絡請求默認為Https請求。

解決方案:

(??ˇoˇ??)
如需支持Http,修改info.plist文件添加鍵值對設置允許http訪問。

image

或者
在App Transport Security Settings中添加Allow Arbitrary Loads設置為YES即可。

image.png
  • You have not accepted the license agreements of the following SDK components:

出現(xiàn)原因

(??ˇ_ˇ??)
最新在使用react-native-vector-icons組件的時候,按照官方文檔手動配置完后 run-android 后出現(xiàn)了上面的錯誤,是要因為缺少 Android SDK Platform 26。

解決方案

(??ˇoˇ??)
使用android studio 導入react native項目中的android目錄,然后項目在gradle的時候控制臺自動彈出錯誤 Error:Failed to find Build Tools revision 26.0.1 install.build.tools">Install Build Tools 26.0.1 and sync project雙擊錯誤,同意安裝android-26。

image.png

安裝完成后重新build ok。
image.png

  • 最近在使用官方提供的FlatList做上拉加載更多的時候,發(fā)現(xiàn)每次上拉刷新的時候都會連續(xù)執(zhí)行兩次onEndReached的回調方法。

出現(xiàn)原因

(??ˇ_ˇ??)
官方FlatList組件的bug。

解決方案

(??ˇoˇ??)
1,在FlatList中添加onMomentumScrollBegin方法回調。
<FlatList
data={this.props.data}
onEndReached={...}
onEndReachedThreshold={0.5}
...
onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
/>
2,在onEndReached的回調方法中加入判斷。
onEndReached = () => {
if (!this.onEndReachedCalledDuringMomentum) {
this.props.fetchData();
this.onEndReachedCalledDuringMomentum = true;
}
};

點我查看詳細解決方案鏈接

image.png
  • Cannot read property 'xxx' of undefined

出現(xiàn)原因

(??ˇ_ˇ??)
出現(xiàn)這種情況的時候是比較好定位的,首先定位到代碼位置,然后檢查 sss.xxx sss時候是否為空null。我是在下面這種下遇到的,我當前環(huán)境用的是react native 0.49.5版本,在github上找到了一個比較老版本的插件,然后安裝運行,報了這個錯誤。

定位步驟

1,在項目的node_modules下找到該插件的index.js。
2,老版中PropTypes是從react中導出的

image.png

image.png

解決方案

(??ˇoˇ??)
1,在新版中PropTypes應該是下圖這樣引用的,所以需要修改上圖的引入方式

image.png

2,重新run就ok了

6B786002730BC72959A5E9EF22F5B02B.jpg
  • Requiring module "NativeModules" which threw an exception (index.android.bundle:64)

出現(xiàn)原因

(??ˇ_ˇ??)
react packager窗口沒有打開或者你關閉了,本地資源服務沒有運行起來。

解決方案

(??ˇoˇ??)
運行 react-native run-android 自動會打開這個命令窗口


image.png
  • 運行ios真機Signing for "TestDemoTests" requires a development team. Select a development team in the project editor. Code signing is required for product type 'Unit Test Bundle' in SDK 'iOS 11.1'
    image.png

出現(xiàn)原因

(??ˇ_ˇ??)

image.png

3的位置沒有設置Team

解決方案

(??ˇoˇ??)


image.png

設置完重新run就OK了

9FFB9565-3AD8-44AE-B08E-7C027A7FCD81.png

flatlist Invariant Violation: Tried to get frame for out of range index NaN

出現(xiàn)原因

(??ˇ_ˇ??)
flatlist 數(shù)據(jù)源data數(shù)據(jù)json結構不是數(shù)組對象。

解決方案

(??ˇoˇ??)
數(shù)據(jù)源json結構改為數(shù)組對象。

D509E5C9-B7F1-4F24-9AB0-44A07DB25C9B.png

Warning: Failed child context type: Invalid child contextvirtualizedCell.cellKeyof typenumbersupplied toCellRenderer, expectedstring.

(??ˇ_ˇ??)
flatlist組件中keyExtractor配置項

<FlatList
...
keyExtractor = {this._keyExtractor} 
...
/>

出現(xiàn)警告的react native版本是 0.53.0但我知道在0.49.5版本中沒有出現(xiàn)過,看警告的提示是要求我們傳一個string但我門傳入了一個number 類型,不知道是不是一個bug,反正我是搞不懂react native為什么這么做,我是個強迫癥不喜歡??.

解決方案

(??ˇoˇ??)
修改之前code:

 _keyExtractor = (item, index) => {
        return item.id;
    };

修改之后code:

 _keyExtractor = (item, index) => {
        return item.id.toString();
    };

(??ˇ_ˇ??)
nw_socket_handle_socket_event [C409.1:1] Socket SO_ERROR [61: Connection refused]

解決方案

(??ˇoˇ??)
修改下列文件

patch-package
--- a/node_modules/react-native/React/Inspector/RCTInspectorPackagerConnection.m
+++ b/node_modules/react-native/React/Inspector/RCTInspectorPackagerConnection.m
@@ -196,7 +196,7 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
     [self abort:@"Websocket exception"
       withCause:error];
   }
-  if (!_closed) {
+  if (!_closed && [error code] != ECONNREFUSED) {
     [self reconnect];
   }
 }
patch-package
--- a/node_modules/react-devtools-core/build/backend.js
+++ b/node_modules/react-devtools-core/build/backend.js
@@ -23,11 +23,16 @@
                     return connectToDevTools(options);
                 }, 2e3);
             }
-            function handleClose() {
-                hasClosed || (hasClosed = !0, scheduleRetry(), closeListeners.forEach(function(fn) {
-                    return fn();
-                }));
-            }
+          function handleClose() {
+            hasClosed || (hasClosed = !0, scheduleRetry(), closeListeners.forEach(function(fn) {
+              return fn();
+            }));
+          }
+          function handleError(err) {
+            hasClosed || (hasClosed = !0, closeListeners.forEach(function(fn) {
+              return fn();
+            }));
+          }
             function handleMessage(evt) {
                 var data;
                 try {
@@ -48,7 +53,7 @@
             } : _ref$isAppActive;
             if (!isAppActive()) return void scheduleRetry();
             var messageListeners = [], closeListeners = [], uri = "ws://" + host + ":" + port, ws = websocket ? websocket : new window.WebSocket(uri);
-            ws.onclose = handleClose, ws.onerror = handleClose, ws.onmessage = handleMessage, 
+            ws.onclose = handleClose, ws.onerror = handleError, ws.onmessage = handleMessage,
             ws.onopen = function() {
                 var wall = {
                     listen: function(fn) {

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容