React-Native环境搭建各种问题处理

最近打算入门学习react-native的开发，但是在环境搭建时候出现了各种问题。在这里跟大家分享下我踩过的各种坑。

环境搭建：根据官网http://facebook.github.io/react-native/ 给出的步骤。环境很容易就搭建起来了

               1、安装node brew install node

               2、安装watchman brew install watchman

               3、安装react-native-cli npm install -g react-native-cli

               4、构建项目 react-native init AwesomeProject

这样我们就创建了一个react-native的工程。只需要cd到AwesomePreject目录下执行命令行react-native run-ios 就会在ios的模拟器上运行你的RN项目。

问题1：

执行react-native run-ios命令时报错：

Command failed: /usr/***/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/imoocApp.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

这个问题网上大多数人给出的办法是：

1、删除工程目录下的node_modules

2、删除相关的build文件夹执行

npm install

这个方法让我想起了我们那个年代的网管，没有什么机器问题是重启解决不了的。但是对于我遇到的这个问题然并卵。可能根据react构建项目时候不同版本遇到的问题解决方式不一样。

还有一部分人给出的解决方案是：

react-native init MyApp --version 0.44.3 

使用这行命令行构建项目实际是构建了一个react 0.44.3版本的RN项目。虽然构建出的项目可以解决上述的问题。但是版本比较老。根据最新的版本0.54比项目的结构和新版本差距很大。并得不到想要的理想结果。

最终方案：

这个我参考了一个博主的方案 https://www.cnblogs.com/erniu/p/8670590.html

第一步：下载正确的boost_1_63_0.tar.gz覆盖~/.rncache/boost_1_63_0.tar.gz，下载地址在这里boost_1_63_0.tar.gz


第二步：使用shasum跑出~/.rncache/boost_1_63_0.tar.gz的hash字符串备用
➜  ~ shasum ~/.rncache/boost_1_63_0.tar.gz
f8e4d5aeaa65f429f4135b037d3c3528be5ebf77  /Users/erniu/.rncache/boost_1_63_0.tar.gz

第三步：打开项目中的node_modules/react-native/scripts/ios-install-third-party.sh，替换boost_1_63_0.tar.gz的hash串为你第二步中得到的hash串

fetch_and_unpack glog-0.3.4.tar.gz https://github.com/google/glog/archive/v0.3.4.tar.gz 69f91cd5a1de35ead0bc4103ea87294b0206a456 "\"$SCRIPTDIR/ios-configure-glog.sh\""
fetch_and_unpack double-conversion-1.1.5.tar.gz https://github.com/google/double-conversion/archive/v1.1.5.tar.gz 96a8aba1b4ce7d4a7a3c123be26c379c2fed1def
# fetch_and_unpack boost_1_63_0.tar.gz https://github.com/react-native-community/boost-for-react-native/releases/download/v1.63.0-0/boost_1_63_0.tar.gz c3f57e1d22a995e608983effbb752b54b6eab741
fetch_and_unpack boost_1_63_0.tar.gz https://github.com/react-native-community/boost-for-react-native/releases/download/v1.63.0-0/boost_1_63_0.tar.gz f8e4d5aeaa65f429f4135b037d3c3528be5ebf77
fetch_and_unpack folly-2016.09.26.00.tar.gz https://github.com/facebook/folly/archive/v2016.09.26.00.tar.gz f3b928b5039235bad6cece638c597c6684d1e4e6
第四步：好了，这时候重新再编译一次，不出意外就正常跑起来了。

正当我欢呼雀跃的时候问题又出现了上述问题，只是跟之前比多编译了一些文件而不是卡在那里半天才报错。虽然没成功但是还是很高兴，毕竟觉得离成功进了一步。在网上又试了很多办法之后都米有效果。最终在看网易云课堂搭建RN环境教程里看到了一个视频他用的RN版本是0.52的。于是试了一下成功了

解决方案：

修改工程目录下的package.json文件里的配置信息

"dependencies": {

"react": "16.2.0",

"react-native": "0.52.0"

},

"devDependencies": {

"babel-jest": "22.4.3",

"babel-preset-react-native": "4.0.0",

"jest": "22.4.3",

"react-test-renderer": "16.2.0"

},

版本号分别换成16.2.0和0.52.0执行react-native run-ios

模拟器成功启动了工程。0.52和0.54之间差距不是很大。是目前找到最好的结局方案了。完结撒花感动到泪奔~~~~~~~~~~~~

=================================

然而那是不可能的，项目跑起来后出现了红屏的问题。

模拟器上给出的提示是

No bundle URL present

Make sure you’re running a packager server or have included a .jsbundle file in your application bundle

网上一搜，又搜出来一批重启的网管。依然解决不了我的问题。

然后在Stack Overflow上看到了一些人给出的解决方案是修改工程目录下/ios/工程名称/AppDelegate.m文件里的变量jsCodeLocation 如下所示

jsCodeLocation =

    [NSURL URLWithString:@" http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true "];

这个方法有的人可能问题会解决，我在其他的版本试过这个方法，能解决这个红屏的问题，虽然还没有正经的开发RN项目。但是可以看出这一步是写死了127.0.0.1：8081这个ip去启动项目。估计在后期打包时候或者开发时候会有很多不便。所以不是最理想的方案。并且在0.52这个版本也解决不了红屏的问题会出现另一个红屏错误。

我是做android和node.js开发的。对于oc的语言不是很了解。但语言都是相通的，仔细研究了下他的代码。发现他这里想要取localhost的ip参数。

于是想到了修改host文件,终端输入一下命令

sudo vi /private/etc/hosts

在hosts文件里加入下行文字保存

127.0.0.1       localhost

这里考虑到一些不会用vim编辑器的小伙伴可以在finder中使用快捷键command+shift+G 弹出跳转窗口输入“/private/etc/hosts”，点击【前往】进行修改。

然后执行

react-native run-ios

总算跑起来了，然后又试了一下安卓。

react-native run-android

果然没有想象的那么顺利报错了。具体报的什么错忘记了。只记得是因为我的mac没做配置android的环境变量导致的

具体怎么配置android的环境变量百度或者google一搜一大把。

目前对react-native还不是太了解，只是用这个框架只是做了一些简单的页面玩了玩，觉得还是挺强大的一个框架。一些简单的资讯类app完全可以用RN来开发。一端开发同时支持ios和android两个平台，并且还支持热更新。解决了一些审核不必要的麻烦。但是如果要做深层次叫交互还是原生的效果比较好一些。不会像很多人说的那样，有的人说RN以后会强大起来写原生的就要下岗了。我觉得近两三年还不至于。两三年之后会不会有什么概念性的产品出来还是未知呢。就像当年虽也没想到诺基亚和他的塞班会被淘汰一样。几年之后会不会有更先进的东西来推翻苹果和安卓也说不定。