首页 » React Native » React Native技术文章 » 正文

React Native疑难点,问题深坑最强总结帖(不断更新中)

| React Native技术文章 | | 47 条评论 | 12116 views

本文章主要总结了在使用React Native开发过程中遇到的疑难杂症,问题深坑。各种问题的解决方案在不断更新中~如果有各位童鞋已经遇到并且解决掉的问题方案，也希望可以提供给我。React Native技术交流1群:282693535  大家可以加群进行交流或者关注我的微信订阅号:codedev123

Mac和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),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)