React Native开发错误警告处理总结(已解决 !持续更新)
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者。文中有不妥的地方希望指出共同学习,同时欢迎大神补充。(之后我会放出自己开发整理的笔记和GithubDemo地址,欢迎 star)欢迎持续喜欢关注 star。
遇到问题的可以来这个群里交流: 644124441
欢迎对 ReactNative 开发感兴趣的朋友加入! 644124441
点击链接加入群【ReactNative-解决问题交流】:
错误1:
估计是程序中有格式错误请自行检查比如:你注释出来问题。
{/*title="张三"*/}
换
//title="张三"
错误2:
这个说明你要跳转的页面缺少子控件。所以你要在里面添加东西比如加个:<View></View>
警告3:调试警告
看下报的警告就知道调试程序在这个窗口导致运行缓慢,所以建议你换一个单独新的窗口进行调试
警告4:
解决方法就是你的Xcode没有适配HTTPS iOS9的
加上:
<key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key><true/></dict>
错误4:
这个很神奇。遇到了不要紧张多按 ⌘R几下或者把模拟器上的项目删除之后重新加载一般就会解决
错误5:
认真看下错误信息,上面说你忘记返回值了 所以你的函数中少了一个return();
错误6:
如果你检查代码确实没有错误。还报这个错,那就说明你的端口被占用了。打开终端,切换到项目目录。执行react-native start
如果出现Packager can't listen on port 8081
那说明端口被占用了。
:根据命令行提示进行操作:
1.lsof -n -i4TCP:8081
列出被占用的端口列表
2.kill -9 <PID>
找到与之对应的PID然后删除即可
错误7:
SyntaxError: SyntaxError /Users/zhaopengsong/Desktop/ReactNative/BuyDemo/Component/Main/ZPMain.js: JSX value should be either an expression or a quoted JSX text (107:22)
语法错误,JSX语法必须用{}对变量进行赋值:如title=titleName
换为title={titleName}
或者检查下有没有其他的语法错误,比如少了逗号
多了分号
这些低级错误
错误8
Requiring unknown module "undefined".If you are sure the module is there, try restarting the packager or running "npm install"
这个错误我的解决思路是:之前改过什么,撤回,一般是用到了错误的react-native 方法导致的。
错误9:
原因:没有启动后台react-Native 服务。即终端
错误10:
如果你遇到了列如九宫格不自动换行的情况,检查一下样式里面有没有这两句话flex-start:交叉轴的起点对齐。``wrap:换行,第一行在上方。
错误11:
ExceptionsManager.js:63 Expected a component class, got [object Object]
解决方法:
You need to rename your commonView
class to CommonView
, the class must be capitalize
错误12:
这是你请求的URL错误。要是https://
的才行。
错误13:创建新项目,react-native init 项目名命令长时间无响应,或报错shasum check failed
react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
另,执行init时切记不要在前面加上sudo
错误14:修改8081默认端口号的两种方式
(1)启动项目时react-native start --port 8083
(2)手动修改项目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件,如下图所示。
错误15:
Application NewsDemo has not been registered.
This is either due to a require() error during initialization
or
failure to call AppRegistry.registerComponent.
错误原因是端口冲突。解决方法是看错误14
其次解决方法是:
1、终端
2、cd 到项目目录
3、react-native start
4、lsof -n -i4TCP:8081 //这句可以看打印出8081端口下的服务
5、kill -9 <PID> //终止你其他占用端口
如图:
错误16:
如果你遇到了这个问题,并解决了。希望能在下面留言帮助更多的人。感谢!(我的错误原因是require路径出错,我是换用URI 加载image资源解决的)
错误17:
错误出现执行react-native run-ios
出现下面错误
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not ExistCommand failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ReactNativexx.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
解决方法:
1、新建项目指定版本:
用--version
参数创建指定版本的项目。例如react-native init DemoApp --version 0.44.3
注意版本号必须精确到两个小数点。
项目创建好之后:执行:react-native run-ios
2、尝试reset一下 模拟器之后再react-native run-ios
3、尝试执行react-native upgrade
然后一路enter
再react-native run-ios
试试?
解决方法参考链接:连接1,连接2
3、在这里感谢:LeeyaWang 提供自己的解决思路:希望对之后遇到此问题的同学有所帮助!
步骤是:
1、首先删除node_modules
2、修改package.json中react-native的版本为0.44.3 react为16.0.0-alpha.6
3、react-native run-ios 就可以啦 后来是出现我发你的问题 我觉得 应该是我这边vpn的问题,所以我重启了一下电脑 然后重置了模拟器 就可以了
友情提示: 如果你用的ReactNative版本为0.45.1,新建项目之后运行出现这个错误:
'boost/iterator/iterator_adaptor.hpp' file not found
错误原因: 0.45需要下载boost编译,因为被墙了所以会无法运行。
解决方法:
方法1、
第一步:将项目中的package.json
文件修改为这样:
第二步:修改完成之后删除node_modules
文件夹在终端run:npm install
第三步:执行:react-native run-ios
方法2、新建项目指定版本:
用--version
参数创建指定版本的项目。例如react-native init DemoApp --version 0.44.3
注意版本号必须精确到两个小数点。
项目创建好之后:执行:react-native run-ios
错误18:
解决:
var View = React.View;/* later... */
propTypes: {...View.propTypes,myProp: PropTypes.string
}
错误19:(这个错误我的解决方法是新建项目,把组件放到新项目,重新安装第三方,然后run
,虽然笨了点,但是问题解决了。)
啊。。。。。这个问题让我头痛死了[来看看GitHub上的讨论]
哪位大神知道便捷的解决方案希望评论给出!感激!
(https://github.com/facebook/react-native/issues/4968)
尝试解决:1、react-native link
||rnpm link
一下然后再安装
react-native run-ios
遇到:
错误20:
Application textDemo has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.
解决方案:
1、是注册的时候写错了。也就是这段话注册的不对:
AppRegistry.registerComponent('textDemo', () => textDemo);
注意:‘textDemo’这个是项目名 textDemo这个你可以随自己你喜好指定。
2、很有可能是8081端口被占用了
你可以尝试:切换到项目所在目录,输入react-native start
如果出现Packager can't listen on port 8081
那说明端口被占用了。
根据命令行提示进行操作:
1.lsof -n -i4TCP:8081
列出被占用的端口列表
2.kill -9 <PID>
找到与之对应的PID然后删除即可
3.重新运行项目 react-native run-ios/android
错误21 :
如果你项目中频繁遇到:
'RCTRootView.h'file not found.
RCTBridgeModule.h file not found
解决方法:
1、添加link :$(SRCROOT)/../node_modules/react-native/React
2、到项目目录下sudo npm install
试试。
3、
#import "RCTBridgeModule.h"
换为#import <React/RCTBridgeModule.h>
警告22⚠️:
安装的过程中可能会遇到UNMET PEER DEPENDENCY的错误
解决办法就是在安装的时候 指定具体的版本安装:sudo npm install -g react@~15.4.1
这个警告:
npm WARN react-native@0.42.3 requires a peer of react@15.4.1 but none was installed.
解决:
npm install –save react@15.4.1
警告23⚠️:屏蔽OS_ACTIVITY_MODE.log
react-native 运行应用xcode打印log__nw_connection_get_connected_socket_block_invoke Connection has no connected handler
解决方法:
1. Xcode menu -> Product -> Edit Scheme...
2. Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"
3. Run your app again, done! 这样就没问题了
图示:
错误24:
Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` from
`/Users/song/Desktop/ReactNativeRouterFlux/node_module
s/react-native-experimental-navigation/node_modules/react-addons-pure-render-mixin/index.js`:Module does not exist in the module map or in these directories:
解决:
类似这种错误,就是缺少模块,通过npm i react-addons-pure-render-mixin -S 命令即可,标记部分是你缺少的模块名。
如果这样解决不了问题,那你需要降低的的RN版本。可能版本过新了。
1、查看你的版本:react-native --version
2、安装适当的版本:npm install --save react-native@0.42.3
3、更新一下模板:react-native upgrade
错误25
RCTSRWebSocket.m报错
Ignoring return value of function declared with warn_unused_result attribute
这个报错在此文件中有两处,代码
SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);
修改为
(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);
前面加上(void)
。
RCTScrollView.m 报错
Use of undeclared identifier '_refreshControl'; did you mean 'refreshControl'?
解决:
@implementation RCTCustomScrollView
{__weak UIView *_dockedHeaderView;RCTRefreshControl *_refreshControl; // 加入此行
}
警告26⚠️:
[ReactJS Warning: Each child in an array or iterator should have a unique “key” prop]
遇到这个警告说明你的多个视图数组需要给个KEY标示!
可以给每个控件加上Key这样写:
<Text key={0} style={{ position:'absolute', width:imgwidth,height:imgheight,top:64+Y,left:X,fontSize:parseInt(layoutData.fontsize)}}>{texts}</Text>
错误 27:Warning: Failed prop type: Invalid prop source
supplied to RCTImageView
OR
ExceptionsManager.js:71 Warning: Failed prop type: Invalid prop source
supplied to Image
.
解决:这个错误的原因是你给Image 的Source 有问题 比如不是一个URI ,查看一下不是不传入了一个对象像这样。
错误28:
RN iOS 0.45以上版本开始需要依赖一些第三方编译库,这些库在国内下载都非常困难(一般的翻墙工具都很难下载)未来RN不同版本可能依赖不同版本的第三方编译库,具体所需库和版本请查看[ios-install-third-party.sh](https://github.com/facebook/react-native/blob/master/scripts/ios-install-third-party.sh)文件,注意先把左上角的branch切换到对应的版本
boost/iterator/iterator_adaptor.hpp' file not found
解决参考
错误29 Android 项目启动报这个错误:Could not connect to development server
首先检查包服务器是否运行正常。
在项目文件夹下输入react-native start或者npm start均可开启服务器,但是我们需要在PC端确认包服务器是否运行正常。
解决: 1.手机摇一摇进入到Developer Menu 如图:
2.选择 Dev Settings 如图:
3.填写 你的服务 IP 记得端口为:8081
4.点击确定之后重新启动项目, reload 搞定
30 错误
TransformError: /Users/xxxxt/index.ios.js: Unexpected token ) (While processing preset: \"/Users/xxx/node_modules/babel-preset-react-native/index.js\")"
解决方法:
yarn remove babel-preset-react-native
yarn add babel-preset-react-native@2.1.0
31 unrecognized font family material icons
解决方法:
1.Close the running packager
2.Run react-native link react-native-vector-icons
3.Then run react-native start --reset-cache
4.Finally run react-native run-ios
to restart the simulator
32
undefined is not an object (evaluating NativeModuels.UIManager.RCTVideo.Constants')
依次执行:
1.npm i -S react-native-video
2.react-native link
3.然后重启模拟器试(也可以把应用从模拟器删除clean 之后重新 run)试我是这样好的
可参考issues
33 如果uninstall 第三方库之后然后 install xcode 报错linker command failed with exit code 1 (use -v to see invocation)
解决方法:
1.别慌
2.检查一下是不是 install 的时候没有删除module 直接 install 导致的多了或者少了.a文件,我的是这样解决的.
34 underfined is not an object(evaluating 'viewproptypes.style')
解决方法:一.
https://github.com/facebook/react-native/issues/14032
看完之后,解决了问题。
解决方式如下:
找到node_modules目录下的react-native-scrollable-tab-view,将所有js文件中有
ViewPropTypes.style 改为 View.propTypes.style
解决方法二.对于旧项目 三方库较多不好修改
就是新建一个项目,然后把组件放到新项目中.重新 yarn add 一下你所有的库.
如果你只改 RN 版本可能会有其他组件版本跟不上.这样就确保都是最新的版本了
这个方法我已经验证过可以的
35 : 旧项目升级到RN 0.47.1 + 之后出现这个问题
Navigator is deprecated and has been removed from this package. It can now be installed ' +
'and imported from `react-native-deprecated-custom-components` instead of `react-native`. ' +
'Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html'
解决:
1.根据提示:
2.找到对应JS
文件找到并删除:
3.添加:import {Navigator} from 'react-native-deprecated-custom-components'
4安装 yarn add react-native-deprecated-custom-components
5.run 就搞定了
点击链接加入群【ReactNative-解决问题交流】: 644124441
原创文章转载需获授权并注明出处
请在后台留言联系转载
相关文章:
1.ReactNative 实现的文件上传功能(实测可行!)
2.React Native开发总结之:开发技巧和调试技巧
3.React Native开发总结:一、开发环境配置
4.ReactNative之Android打包APK方法(趟坑过程)
5.Android 调试错误总结(ReactNative开发)(持续更新)
6.ReactNative开发之真机测试
7.React Native开发之iOS打包ipa发布(亲测可行)
作者:ZPengs
链接:http://www.jianshu.com/p/98c8f2a970eb
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
React Native开发错误警告处理总结(已解决 !持续更新)相关推荐
- webstorm 运行android,Windows React Native环境搭建:webstorm+android studio 及解决热更新
工具准备: SDK Android SDK Build-tools:23.0.1 SDK Platform:Android N .6.0 .5.1.1.5.0.1.4.4.2.4.1.2 Androi ...
- react native 0.50 源码解析 再出发 持续更新
1.核心类 1.1 RCTRootView 一个RCTRootView持有一个RCTBridge成员变量 RCTRootView : UIViewRCTBridge *bridge;UIViewCon ...
- React Native开发规范(非官方,自己定义的)
React Native开发规范 一.命名规范 二.代码格式 三.注释规约 四.样式规约 五.Redux 相关操作 六.桥接规约 七.JSX 规约 八.组件规约 九.npm 规约 十.性能优化 一.命 ...
- React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述 本节课将从React的特点.如何使用React.JSX语 ...
- Windows环境下安装React Native开发环境----记一次填坑过程
前言 集成React Native开发环境遇到各个坑,调试了很久出现过找不到设备,百度上个别人的资料有误被绕来绕去耽误了很多时间,下载慢等待时间过长等问题,最后多方查阅资料,电脑重启等操作终于部署好了 ...
- React Native开发之——Webstorm开发RN配置
前言 前文React Native开发之--Webstorm快捷开发介绍了使用Webstorm快捷开发React Native, 本文介绍Webstorm开发RN配置. Webstorm开发RN配置 ...
- 在windows上搭建React Native开发环境
最近要学习React Native,但是在window上搭建开发环境的时候遇到了些问题,以至于一直没有搭建好开发环境. React Native相关项目及文档: react-native的GitHub ...
- React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
- 如何用 React Native 开发实时音视频应用
对于 Web.iOS.Android 开发者来讲,React Native 给跨平台开发工作带来了很大的帮助.仅用 JavaScript 就可以创建运行于移动端的应用.同时,你也可以将 React N ...
最新文章
- Spring复习笔记:3
- form表单刷新_《大胖 ? 小课》- 不用 js 实现文件无刷新上传
- 电商谋定重整智能物流生态-李玉庭:对话中国经济和信息化
- Docker镜像分层和临时容器
- J - Just Multiplicative Inverse Gym - 102875J
- 不相关子查询的工作方式是_课题组工作|Nucleic Acids Research|基于表达密度谱的特征子空间分离及相关单细胞转录组分群新算法...
- LeetCode 997. 找到小镇的法官(图的出度和入度)
- 南京江南贡院值得去吗_这12个地方是一种瘾,值得一去再去,有你想要去的吗?...
- OpenCV中 IplImage 与 Mat的区别
- Python+django网页设计入门(16):优化设计复用分页代码
- 机器学习在企业管理中如何落地?25个行业近500名CIO这样说
- NMS(非极大值抑制)算法 -- 理论、代码
- socket编程学习笔记:关于TCP Test Tool的安装和使用
- Thermal_Config_Tool_exe_v1使用
- STM STC NXP单片机 按键扫描
- Ubiquitous Religions POJ - 2524
- python语言编写从一加到100_python学习: 如何循序渐进学习Python语言
- 什么时ACL,即ACL原理
- 北京市车管所及车管分所办公电话
- java 几分钟前几小时前几天前后转化为时间
热门文章
- python requirements.txt_python生成requirements.txt的两种方法
- java窗口怎么实现修改密码_【求助】Java中如何实现更改windows密码
- JDK8特性--Stream(求和,过滤,排序)
- 3d人脸重建 facescape 测试
- libopencv_core.so: file not recognized: File format not recognized
- c++调用python返回字典
- PaddleHub 视频口罩检测
- torch转caffe
- cannot import name 'multiarray'
- Android NDK开发之 NEON基础介绍