最近项目需要,决定入手React Native。
第一步要做的肯定就是能在本机顺利的把官网的Quick Start 跑出来.
先说一下本机的环境:
- 系统: macOS Sierra 10.12.5
- NodeJs: 8.1.0
- Xcode: 8.3.3 (8E3004b)
- react-native-cli: 2.0.1
- react-native: 0.45.1
构建过程
官网是用的brew
来安装node
,但是我这边根据日常开发的需要,会在多个Node版本之间切换,所以我是用的nvm
接下来是watchman
和react-native-cli
,都是按照教程来一步一步安装
brew install watchman
npm install -g react-native-cli
然后是初始化和启动项目
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
然后就出错了:**”:CFBundleIdentifier”, Does Not Exist**
debug过程
先是在github上面找到了一个同样错误的issue,发现有这个错误的人很多,给的解释也不少
端口占用
端口8081被别的程序占用了
lsof -n -i4TCP:8081
node 7601 CXI624 23u IPv6 0xc6b249599e5f1169 0t0 TCP *:sunproxyadmin (LISTEN)
kill - 9 7601
这里面的7601只是一种情况,具体看真实占用这个端口的是什么程序。
我这边可以确定不是,所以pass
重买一台mac解决了
这… 没钱,pass
react-native upgrade
更新react-native
到最新版
我这刚刚下载的,肯定最新版没毛病
sudo
sudo react-native run-ios
这个我是不太想用的,因为用了之后,以后基本都得用sudo,比较麻烦,等确认没别的解决方式再考虑
尝试调整Xcode的配置:
- Go to File -> Project settings
- Click the Advanced button
- Select “Custom” and select “Relative to Workspace” in the pull down
- click done, done
按照上面的做了一下,然后直接基于Xcode来运行程序
结果又出了新的问题 double-conversion.build failed 然后是在这个issue下找到了问题的解决方式:
rm -r ~/.rncache
rm -r <your-project>/node_modules/react-native/third_party
不过最终的编译还是失败。
网络问题
最后在刚刚的那个issue里面找到了那么一段话:
The problem is when building react-native for iOS, the process tries to download some files (using curl) into /.rncache. Specifically, they are “boost1630.tar.gz, double-conversion-1.1.5.tar.gz folly-2016.09.26.00.tar.gz, glog-0.3.4.tar.gz”. The sources of them (at least some of them) are from AWS S3, which aren’t accessible in some regions (I’m from China). And that caused the problem. By using a proxy server and setting the http_proxy and https_proxy environment variables, curl will go through the proxy and the build should succeed. This is not a problem with React Native. This issue can be closed now.
是说的在build的时候,会从AWS S3里面下载一些资源,但是在咱们国内,很多时候是访问不到这些资源的,也自然就导致了一些文件的缺损。
作者在后面给的方式是给curl配置代理,具体看https://stackoverflow.com/questions/9445489/linux-curl-command-with-proxy。
不过我这边用了另外一种方式,把我的蓝灯设置为代理全部流量,接着
rm -r ~/.rncache
rm -r <your-project>/node_modules/
把所有资源删掉,然后重新编译。
最后,成功编译通过!!