本文章主要总结了在使用React Native开发过程中遇到的疑难杂症,问题深坑。各种问题的解决方案在不断更新中~如果有各位童鞋已经遇到并且解决掉的问题方案,也希望可以提供给我。React Native技术交流1群:282693535 大家可以加群进行交流或者关注我的微信订阅号:codedev123
Mac和Windows安装搭建React Native环境教程如下:
- Mac OS X版本:Mac OS X安装React Native环境点击进入....
- Windows版本:Windows系统安装React Native环境点击进入...
1.Windows环境Server Start问题
根据官方文档更新(点击进入),具体截图如下:
如果你现在采用的是Windows系统进行开发React Native项目,那么终端运行react-native run-android命令该打包程序将不会自动开启,所以可以采用如下的命令: cd MyAwesmomeApp 然后react-native start就可以进行运行啦。如果在运行过程中遇到了如下的超时错误:ERROR Wathcer took too long to load。我们可以修改react-native/packager/react-packager/src/DependencyResolver/FileWatcher/index.js该文件的超时时间值即可
2.Windows环境运行官方Demo(UIExplorer,Movies等项目)
大家肯定会根据Reac Native文档进行执行下面的命令进行运行如下:
1 2 3 | cd react-native ./gradlew :Examples:Movies:android:app:installDebug ./packager/packager.sh |
但是这样问题出现Windows下面怎么样执行shell脚本?
解决方案:Windows环境需要安装cygwin之后就可以直接这样执行shell脚本啦 https://www.cygwin.com/
Windows版本超详细编译运行官方实例项目请点击进入....
3.React Native(RN)启动不成功,unable to download js bundle错误解决方案
解决方案如下:
- 3.1.首先需要设置IP和端口,默认端口是8081,手机(模拟器)和电脑在同一个网络中,查询电脑的IP地址。
- 3.2.手动去删除.babelrc隐藏文件,具体文件目录为:node_modules/react-deep-force-update/.babelrc
- 如果是其他版本,那也是需要删除的不过路径已经发生变化了。具体路径:/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update
- 3.3.最后重点 Android项目关闭终端重新执行运行命令,iOS项目也需要关闭服务终端,重新启动packager
4.WebStorm不识别React Native语法解决方案
大家可能会很奇怪,明明自己电脑react native,jscs,react-template都安装了,可以为什么打开react native项目文件还是各种报错呢?如下图:
遇到这个问题还是比较简单,只需要开启JSX语法支持即可,具体解决方案如下:
Preferences -> Languages and Frameworks -> JavaScript -> language version下拉框里选JSX Harmony
5.启动出现红色界面,提示没有注册 unRegisteredProject
错误原因:是提示你的app模块没有进行注册
解决办法:就是查看你的index.android.bundle或者index.ios.bundle中的最下面写的那个localproject和你android或者ios项目中写的是不是一样即可
AppRegistry.registerComponent('localproject', () => projectname);
6.启动运行下载gradle速度太慢,并且容易卡死(感谢群友ˋ狠ㄨ得意提供支持)---国内网络访问地址
我们经常运行项目的时候会需要进行下载gradle,不过由于网络或者和谐的问题经常下载需要花很长时间或者直接超时以及下载失败!
解决方案如下:我们可以按照AndroidStudio的方式采用Gradle离线版本,下载地址:http://services.gradle.org/distributions/gradle-2.4-all.zip
这个地址大家可能有时候也打不开,我已经上传了一个版本到百度网盘了:链接: http://pan.baidu.com/s/1c0RkNM4 密码: gvak
下载完之后打开当前需要运行的项目中的gradle-wrapper.properties文件进行如下配置,就可以采用离线版本了,速度非常快哦~
群里有人反应Gradle经常下载不了,我这边上传了2.4和2.7压缩包到百度网盘大家可以点击下载一下:
gradle2.4版本:链接: http://pan.baidu.com/s/1o7m3kd8 密码: tqa2
gradle2.7版本:链接: http://pan.baidu.com/s/1kUvwOHD 密码: 28e5
或者整体url修改成国内镜像地址:
http://mta.zttit.com:8080/images/gradle-2.4-all.zip
http\://mta.zttit.com:8080/images/gradle-2.7-all.zip
http\://mta.zttit.com:8080/images/gradle-2.10-all.zip
http\://mta.zttit.com:8080/images/gradle-2.11-all.zip
http\://mta.zttit.com:8080/images/gradle-2.12-all.zip
7.运行项目的时候transforming进度达到100%,但是进度最后差一点例如399/400
具体错误截图如下:
该问题解决方案,具体可以查看上面第三点删除中react-force-update/.babelrc文件,然后重新运行即可~
8.Watcher took too long to load (WatchmanWatcher)该错误解决方案方案
mac/linxu系统版本解决方案:
具体错误截图如下:
根据截图中的日志提醒的解决方案,我们打开:https://facebook.github.io/watchman/docs/troubleshooting.html 该网页去寻找解决方案。在页面的最底部有更新watchman的代码:
watchman shutdown-server brew update brew reinstall watchman
接下来重新运行reactnative项目即可。
windows系统解决方案:
ERROR Watcher took too long to load的报错,请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件的具体路径是node_modules\react-native\packager\react-packager\src\DependencyResolver\FileWatcher\index.js或node_modules/react-native/packager/react-packager/src/FileWatcher/index.js)。
9.windows版本init项目错误,终端提醒让你查看npm_debug.log
具体错误截图如下:
遇到遇到这个问题首先命令行查看你一下你的npm版本具体命令:npm --version 如果你的版本是2.4左右例如:
这时你就需要进行升级npm的版本了,npm2在windows系统不支持,需要升级到npm3以上。具体升级版本点击请查看 该该文章的中间有升级方法。
10.RCTNetworking.sendRequest got 7 arguments, expected 6
有童鞋导入一个module的时候运行可能会出现这个错误,该错误已经在0.19版本修改了。建议大家react native升级到0.19版本:升级详情请点击
同时fix android项目app目录中的build.gradle文件:compile 'com.facebook.react:react-native:0.19.0'
11.ReferenceError: Can't find variable: __fbBatchedBridge错误解决方案
该错误截图如下:
12.环境安装错误解决方案
具体错误信息如下:
E:\react-native\node_modules\ws\node_modules\utf-8-validate>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild ) 在此解决方案中一次生成一个项目。若要启用并行生成,请添加“/m”开关。 C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Microsoft.CppBuild.targets(366,5): warning MSB8003: Could not fi nd WindowsSDKDir variable from the registry. TargetFrameworkVersion or PlatformToolset may be set to an invalid versio n number. [E:\react-native\node_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj] TRACKER : 错误 TRK0005: 未能找到: “CL.exe”。系统找不到指定的文件。
解决方案:https://github.com/nodejs/node-gyp#installation
13. com.android.ddmlib.InstallException: Unable to upload some APKs解决方案
解决方案来源地址:https://github.com/Kennytian/learning-react-native/blob/master/environment/react_native_pit.md
魅族 Meizu m2 note / 魅族 Meizu MX4 / 华为 Huawei Mate 7 / 华为 Huawei P8 / 小米 Redmi Note 2 / 乐视 Letv X500 无法安装以上手机安装apk时, 可能会报一个 com.android.ddmlib.InstallException: Unable to upload some APKs, 我们需要修改如下几个位置:
需要将 android/build.gradle 里的 gradle:1.3.1 改为 gradle:1.2.3
需要将 android/gradle/wrapper/gradle-wrapper.properties里的 distributionUrl 版本改为gradle-2.2-all.zip
14.React Native源代码Zip包下载
0.25.1版本:链接: http://pan.baidu.com/s/1gf2PIyZ 密码: yntu
15.Super expression must either be null or a function,not undefined
错误截图:
出现这个问题很可能是ES5/ES6语法混用了,可以检查一下语法情况,或者从0.26版本的React导入方式发生了改变:例如以下一种导入方式:
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, } from 'react-native';
16.Execution failed for task ':app:installDebug'.com.android.builder.testing.api.DeviceException:com.android.ddmlib.ShellCommandUnresponsiveException
解决方案:尝试降级 Gradle version to 1.2.3 in <project-name>/android/build.gradle
touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties
17.React Native For iOS升级到0.27版本之后出现的问题
问题截图:
大致步骤干了以下几点:
1)重新安装node到最新版;
2)升级React;
3)删除缓存;
4)杀掉NODE进程 lsof -n -i4TCP:8081
5)调整代码
如果你有积累下来的问题解决方案,可以联系并且发送给我~注意加群React Native技术交流1群:282693535
尊重原创,转载请注明:From Sky丶清(http://www.lcode.org/) 侵权必究!
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)