react native 0.49.5 报错/注意事项集锦(持续更新)

欢迎大家 ❤️ 收藏,遇到问题在此页面 command + F 说不定你遇到的问题已经有解决方案了,如果有问题可以在下方评论,嘿嘿,(。◕ˇoˇ◕。)

image.png
  • react native cached bundles

出现原因:

(。◕ˇ_ˇ◕。)
多个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

出现原因:

(。◕ˇ_ˇ◕。)
这个错误一般在ios模拟器和真机上会遇到,网上看到原因有很多种,这里不详细说明。

解决方案:

(。◕ˇoˇ◕。)

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

    配置完成后重新关闭 React PackagerReact Packager是啥?答:执行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: ''

出现原因:

(。◕ˇ_ˇ◕。)
设置了 跳转的当前界面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.

出现原因:

(。◕ˇ_ˇ◕。)
我们在该组件还没装载完成之前调用了该组件setState方法,一般这种错误会出现在很多异步的操作中,比如fetch操作,虽然这是一个警告其实是个致命错误,警告之后再次操作就会报错。

解决方案:

(。◕ˇoˇ◕。)
在组件装载完成的componentDidMount方法里做setState操作。

  • ios上http的图片显示不出来

出现原因:

(。◕ˇ_ˇ◕。)
在iOS9之后,网络请求默认为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:

出现原因

(。◕ˇ_ˇ◕。)
最新在使用react-native-vector-icons组件的时候,按照官方文档手动配置完后 run-android 后出现了上面的错误,是要因为缺少 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做上拉加载更多的时候,发现每次上拉刷新的时候都会连续执行两次onEndReached的回调方法。

出现原因

(。◕ˇ_ˇ◕。)
官方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

出现原因

(。◕ˇ_ˇ◕。)
出现这种情况的时候是比较好定位的,首先定位到代码位置,然后检查 sss.xxx sss时候是否为空null。我是在下面这种下遇到的,我当前环境用的是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)

出现原因

(。◕ˇ_ˇ◕。)
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

出现原因

(。◕ˇ_ˇ◕。)

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

出现原因

(。◕ˇ_ˇ◕。)
flatlist 数据源data数据json结构不是数组对象。

解决方案

(。◕ˇoˇ◕。)
数据源json结构改为数组对象。

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

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

(。◕ˇ_ˇ◕。)
flatlist组件中keyExtractor配置项

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

出现警告的react native版本是 0.53.0但我知道在0.49.5版本中没有出现过,看警告的提示是要求我们传一个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) {

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容