欢迎大家 ❤️ 收藏，遇到问题在此页面 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 Packager，React 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) {
网友评论