如果没有兴趣看我叙述解决问题的过程,可以直接看最后的 快速解决问题
if you are not interested in the process of solving problem, you can see the last paragraph solve this problem quickly directly
今天下午本打算写一个Echarts 的Demo。当我熟练的在终端执行完react-native init EchartsDemo
和 react-native run-ios
后,终端提示了下面的错误:
分析一下报错原因:
在执行脚本1的时候,脚本里的解压命令2出错了。如果按报错信息3的字面意思来理解的话,感觉Info.plist难逃干系,事实上,Info.plist只是一个无辜的吃瓜群众。
接下来就来找找解决办法吧。
在react-native v0.45版本的时候,我已经遇到过这个问题了,当时我的解决方案如下图(open the resolution link,then command+f,search "whoyoung") :
简言之,就是我在react-native v0.45版本之前一直没遇到这个问题,升级0.45版本后就出现在问题了,所以把版本降回0.44就好了。
当然,也有人给出了其他的解决方案,例如,我天朝的一位程序媛 Vanessa219 在她的文章 React Native 系列【异常】 中给的解决方案,我认为是一个比较彻底的解决方案。在她的方案中提到将
~/.rncache
目录下的压缩包删除,自己手动下载压缩包。为什么要这样做呢?根据终端的报错提示,我们可以知道,是因为压缩包解压失败导致的build failed,那为什么会解压失败呢?因为压缩包下载的不完整。自己可以试试手动解压一下文件试试,会报解压失败的提示:
从上图可以看出这个压缩包只有34kB,而实际上通过手动下载的压缩包是12.3MB。初步推测可能是由于网络原因导致下载出错。
既然提到了手动下载压缩包,那去哪里下载呢?还是要根据终端的错误提示1,来找到下载链接。终端提示是在执行
/bin/sh -c /Users/young/Documents/iOS/EchartsDemo/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/double-conversion.build/Script-190EE32F1E6A43DE00A8543A.sh
这个命令时失败的,那我们就在终端中输入命令:open /Users/young/Documents/iOS/EchartsDemo/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/double-conversion.build/Script-190EE32F1E6A43DE00A8543A.sh
看看这个命令里执行的脚本都做了什么吧:
这个脚本在
$SRCROOT/..
目录下运行了 scripts/ios-install-third-party.sh
这个脚本。$SRCROOT
的路径是啥呢?在终端里 command+f
搜一下 SRCROOT
就知道了:
既然找到了路径,那就执行命令
open /Users/young/Documents/iOS/EchartsDemo/node_modules/react-native/React/../scripts/ios-install-third-party.sh
去看看 ios-install-third-party.sh
做了些什么吧:
简单概括一下fetch_and_unpack
这个函数的作用:
- 检查
~/.rncache
路径下是否有命名为$file的文件。没有的话,就根据传的url去下载。 - 检查
$SRCROOT/..
路径下的thirdParty目录下有没有命名为$file的文件夹。没有的话,就将~/.rncache/$file
解压到thirdParty目录下。 -
如果传参里的
cmd
有值的话,就在解压后的$file
文件夹下执行cmd
传过来的命令。
根据 ios-install-third-party.sh
脚本里的最后四行,我们就知道下载压缩包的地址了。我们复制一下下载地址,在浏览器中下载吧。下载路径放在 ~/.rncache
下。完成之后,我们在我们的工程根目录下 /Users/young/Documents/iOS/EchartsDemo/
再次执行 react-native run-ios
。 执行
react-native run-ios
后可能会出现两种结果。
- 终端不再报压缩包解压及相关的错误了,这时用Xcode打开工程,点击 Run 运行即可。
- 终端或Xcode报如下错误:
报错原因是找不到/Users/young/Documents/iOS/EchartsDemo/node_modules/react-native/third-party/glog-0.3.4/src
路径下的文件。那我们去 ``/Users/young/Documents/iOS/EchartsDemo/node_modules/react-native/third-party/glog-0.3.4/`目录下看看,打开目录发现并没有src目录,当然也就找不到src目录下的文件了。通过手动解压glog-0.3.4压缩包与脚本里tar解压的third-party下glog-0.3.4的文件对比发现:
tar 解压的glog-0.3.4目录下缺少一些文件,既然缺少文件,那就将手动解压的文件拷贝到glog-0.3.4目录下吧(拷贝时跳过已存在的文件)。
大概你可能也像我一样觉得,这次应该没问题了吧。怀着激动的心情在Xcode中点击 Run , 妖兽啊,又报错了!!!
报错提示说src目录下没有config.h文件,为什么会没有呢?因为,src文件是我们手动解压,然后拷贝到src目录下的呀。手动拷贝的怎么了?难道有毒吗?当然没有毒了!这就是为什么我在上面要介绍
fetch_and_unpack
这个函数的原因了:fetch_and_unpack
函数对glog-0.3.4压缩包的处理与其他几个压缩包的处理区别在于:在glog-0.3.4文件夹下执行了 /Users/young/Documents/iOS/EchartsDemo/node_modules/react-native/scripts/ios-configure-glog.sh
脚本。既然如此,那我们就再执行一遍命令吧:sh /Users/young/Documents/iOS/EchartsDemo/node_modules/react-native/scripts/ios-configure-glog.sh
待执行结束,在Xcode中点击 Run,程序就运行起来了。好累,感觉不会再爱了。
快速解决问题
看到这里,大概你也意识到了解决这个问题需要好几个步骤。那就想方设法简化一下吧。
我想到的最简单的方法就是直接把解压好、并且执行过ios-configure-glog.sh脚本的这几个文件压缩成一个压缩包上传到我的云网盘中。
以后新建工程,按以下步骤操作:
- 执行react-native init projectName 命令
- 在工程目录下执行react-native run-ios命令
- 下载我共享的压缩包 RN.zip (也可以通过clone或者下载我的 Demo ,在demo根目录下存放着RN.zip)。
- 解压 RN.zip,会得到两个zip包:rncache.zip和thirdParty.zip。
- 将rncache.zip解压会得到4个.gz包,把这四个.gz包放在~/.rncache目录下。
- 将thirdParty.zip解压后的文件放到工程目录下的
node_modules/react-native/third-party/
路径下(也可以不解压thirdParty.zip,因为运行的时候,third-party路径下如果没有4个.gz包,脚本ios-install-third-party.sh会将.rncache目录下的四个.gz包,解压到third-party路径下,由于解压比较耗时,相应的程序运行起来的较慢)。 - 在Xcode中点 Run,就好了。
对于已经报错的工程,直接解压我共享的压缩包,替换掉.rncache目录和third-party目录下的文件,在Xcode中点 Run,就OK了。
solve this problem quickly (translate for foreigner friends)
- click here to download RN.zip file (or clone or download my demo , RN.zip is in the demo's root directory)
- unarchive RN.zip file, you'll got two .zip files : rncache.zip , thirdParty.zip
- unarchive rncache.zip to the directory ~/.rncache/
- unarchive thirdParty.zip to the project's directory ``node_modules/react-native/third-party/
- open your project using Xcode, click Run