React Native 部署开发环境

前言

Mac：Sierra v10.12.5
Xcode：v8.3.3

特别说明：
该文章适合在不翻墙的情况下操作。或者是shadowsocks设置** 全局模式下操作（如果你的shadowsocks设置成了全局模式，那么慢烦你改成自动代理模式**）。
如果你翻墙了，那么将导致了之前可以正常连接到本地的packager的server，由于全局网络代理，从而需要绕道国外服务器，再去连接本地，所以就无法正常访问了！

🌎查看 Mac 上有没有安装Homebrew(v1.2.3)

之所以这里要西安查看一下，是因为很多可以使用CocoaPods的 Mac 都已经安装过了。就没必要再重新安装了。仅此而已！

Homebrew， Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

打开终端，输入

brew -v

✅如果已经安装成功

终端会输出

Homebrew 1.2.3

❌如果没有安装过

终端执行命令

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

输出

==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew

Press RETURN to continue or any other key to abort
==> /usr/bin/sudo /bin/mkdir -p /Library/Caches/Homebrew
Password:
==> /usr/bin/sudo /bin/chmod g+rwx /Library/Caches/Homebrew
==> /usr/bin/sudo /usr/sbin/chown wanghongqing /Library/Caches/Homebrew
==> Downloading and installing Homebrew...
remote: Counting objects: 10, done.
remote: Compressing objects: 100% (1/1), done.
remote: Total 10 (delta 9), reused 10 (delta 9), pack-reused 0
Unpacking objects: 100% (10/10), done.
From https://github.com/Homebrew/brew
 + 17b2694b...44c85c46 master     -> origin/master  (forced update)
HEAD is now at 44c85c46 Merge pull request #2801 from apjanke/formula-cop-uniform-_body_node-param
Updated 1 tap (homebrew/core).
==> Cleaning up /Library/Caches/Homebrew...
==> Migrating /Library/Caches/Homebrew to /Users/wanghongqing/Library/Caches/Hom
==> Deleting /Library/Caches/Homebrew...
==> New Formulae
pycodestyle
==> Updated Formulae
amqp-cpp        gtkmm3          kitchen-sync    metricbeat      swiftformat
ansifilter      gucharmap       lsdvd           minisat         twarc
gsmartcontrol   highlight       mapcrafter      n               zsh
gtk+3           hugo            mcabber         openvpn
==> Installation successful!

==> Homebrew has enabled anonymous aggregate user behaviour analytics.
Read the analytics documentation (and how to opt-out) here:
  http://docs.brew.sh/Analytics.html

==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    http://docs.brew.sh

---

🌎安装Node.js(v8.1.2)

使用Homebrew来安装Node.js.

终端执行命令

brew install node

✅等待5分钟左右，安装完毕，终端输出如下

Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> New Formulae
asdf            fd              iamy            jose            rustup-init
bitcoin         get_iplayer     ipython         libmypaint      vips
dcm2niix        grakn           ipython@5       overmind
==> Updated Formulae
·
·
·
此处省略一些内容
·
·
·
==> Deleted Formulae
snescom

==> Installing dependencies for node: icu4c
==> Installing node dependency: icu4c
==> Downloading https://homebrew.bintray.com/bottles/icu4c-58.2.sierra.bottle.tar
######################################################################## 100.0%
==> Pouring icu4c-58.2.sierra.bottle.tar.gz
==> Using the sandbox
==> Caveats
This formula is keg-only, which means it was not symlinked into /usr/local,
because macOS provides libicucore.dylib (but nothing else).

If you need to have this software first in your PATH run:
  echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> ~/.bash_profile
  echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> ~/.bash_profile

For compilers to find this software you may need to set:
    LDFLAGS:  -L/usr/local/opt/icu4c/lib
    CPPFLAGS: -I/usr/local/opt/icu4c/include
For pkg-config to find this software you may need to set:
    PKG_CONFIG_PATH: /usr/local/opt/icu4c/lib/pkgconfig

==> Summary
🍺  /usr/local/Cellar/icu4c/58.2: 242 files, 65MB
==> Installing node
==> Downloading https://homebrew.bintray.com/bottles/node-8.1.2.sierra.bottle.tar
######################################################################## 100.0%
==> Pouring node-8.1.2.sierra.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/node/8.1.2: 3,782 files, 45.9MB

再确认一下是否安装成功，终端输入命令

node -v

终端输出

v8.1.2

---

🌎设置npm镜像(v5.0.3)

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。
注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

📌个人建议：

先查看一下npm的版本，因为这里我踩到了坑

npm -v

❌如果你也输出下面同样的内容

5.0.3

┌─────────────────────────────────────────────────────────────────┐
│                     npm update check failed                     │
│               Try running with sudo or get access               │
│              to the local update config store via               │
│ sudo chown -R $USER:$(id -gn $USER) /Users/wanghongqing/.config │
└─────────────────────────────────────────────────────────────────┘

那么我奉劝你最好按照最后一行去执行，不用去查，相信我。

sudo chown -R $USER:$(id -gn $USER) /Users/wanghongqing/.config

输入管理员密码

your secrect

✅然后什么也不会输出

设置npm淘宝镜像

npm config set registry https://registry.npm.taobao.org --global

✅仍旧什么也不会输出

再输入命令

npm config set disturl https://npm.taobao.org/dist --global

✅依然什么也不会输出

再次查看一下npm的版本，终端应该输出只有版本号，不应该有其它的东西

5.0.3

---

🌎安装 Yarn、React-Native的命令行工具(v0.24.5)

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

React Native 中文网

React Native GitHub

终端输入

npm install -g yarn react-native-cli

❌失败终端会输出

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/react-native-cli/node_modules
npm ERR! path /usr/local/lib/node_modules/react-native-cli/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/react-native-cli/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules/react-native-cli/node_modules'
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/react-native-cli/node_modules' }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wanghongqing/.npm/_logs/2017-06-21T08_37_18_575Z-debug.log

如果你看到EACCES: permission denied这样的权限报错，请修复/usr/local目录的所有权：

📌解决办法

终端输入

sudo chown -R `whoami` /usr/local

输入管理员密码

your secret

✅什么都不输出

再次安装

npm install -g yarn react-native-cli

✅输出

/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
+ react-native-cli@2.0.1
+ yarn@0.24.5
added 163 packages and updated 3 packages in 11.76s

📌安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global

输出

yarn config v0.24.5
success Set "registry" to "https://registry.npm.taobao.org".
✨  Done in 0.04s.

再执行

yarn config set disturl https://npm.taobao.org/dist --global

输出

yarn config v0.24.5
success Set "disturl" to "https://npm.taobao.org/dist".
✨  Done in 0.04s.

---

🌎安装Watchman(v4.7.0)

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

终端输入

brew install watchman

✅等待1分钟左右，安装完毕，终端输出如下

==> Installing dependencies for watchman: pcre
==> Installing watchman dependency: pcre
==> Downloading https://homebrew.bintray.com/bottles/pcre-8.40.sierra.bottle.tar.
######################################################################## 100.0%
==> Pouring pcre-8.40.sierra.bottle.tar.gz
==> Using the sandbox
🍺  /usr/local/Cellar/pcre/8.40: 204 files, 5.4MB
==> Installing watchman
==> Downloading https://homebrew.bintray.com/bottles/watchman-4.7.0.sierra.bottle
######################################################################## 100.0%
==> Pouring watchman-4.7.0.sierra.bottle.tar.gz
==> launchctl unload -F /Users/wanghongqing/Library/LaunchAgents/com.github.faceb
🍺  /usr/local/Cellar/watchman/4.7.0: 21 files, 429.5KB
bogon:~ wanghongqing$ 

---

🌎安装Flow(v0.48.0)

Flow是一个静态的JS类型检查工具。
你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个Flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

终端输入

brew install flow

✅等待1分钟左右，安装完毕，终端输出如下

==> Downloading https://homebrew.bintray.com/bottles/flow-0.48.0.sierra.bottle.ta
######################################################################## 100.0%
==> Pouring flow-0.48.0.sierra.bottle.tar.gz
==> Using the sandbox
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/flow/0.48.0: 8 files, 6.9MB

---

🍺🍺🍺至此，环境配置完毕！👍👍👍

---

🚀测试安装

先选择一个项目创建的指定目录（这里以桌面为例）

cd /Users/wanghongqing/Desktop/

初始化项目

react-native init TestReactNativeProject

✅成功终端会输出

Using yarn v0.24.5
Installing react-native...
yarn add v0.24.5
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native@0.45.1" has unmet peer dependency "react@16.0.0-alpha.12".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 468 new dependencies.
├─ absolute-path@0.0.0
├─ 
此处省略很多内容
├─ 
└─ yargs@6.6.0
✨  Done in 27.16s.
Setting up new React Native app in /Users/wanghongqing/Desktop/TestReactNativeProject
Adding React...
yarn add v0.24.5
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
├─ loose-envify@1.3.1
├─ prop-types@15.5.10
└─ react@16.0.0-alpha.12
✨  Done in 3.29s.
Adding Jest...
yarn add v0.24.5
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 114 new dependencies.
├─ abab@1.0.3
├─ 
此处省略很多内容
├─ 
└─ yargs@7.1.0
✨  Done in 7.13s.
To run your app on iOS:
   cd /Users/wanghongqing/Desktop/TestReactNativeProject
   react-native run-ios
   - or -
   Open ios/TestReactNativeProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/wanghongqing/Desktop/TestReactNativeProject
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

查看一下目录里面的内容

cd TestReactNativeProject
ls -l

输出

total 328
drwxr-xr-x    4 wanghongqing  staff     136  6 21 17:14 __tests__
drwxr-xr-x   10 wanghongqing  staff     340  6 21 17:14 android
-rw-r--r--    1 wanghongqing  staff      81  6 21 17:14 app.json
-rw-r--r--    1 wanghongqing  staff    1142  6 21 17:14 index.android.js
-rw-r--r--    1 wanghongqing  staff    1108  6 21 17:14 index.ios.js
drwxr-xr-x    7 wanghongqing  staff     238  6 21 17:14 ios
drwxr-xr-x  559 wanghongqing  staff   19006  6 21 17:14 node_modules
-rw-r--r--    1 wanghongqing  staff     456  6 21 17:14 package.json
-rw-r--r--    1 wanghongqing  staff  149288  6 21 17:14 yarn.lock

文件夹内目录结构

📌在运行程序之前一定要确保在该项目文件夹目录下

cd TestReactNativeProject

运行程序

react-native run-ios

❌结果却输出

会输出超级多的内容，但是你只关注最后的报错就好了，还是注意看最后一句。Print: Entry, ":CFBundleIdentifier", Does Not Exist

** BUILD FAILED **


The following commands produced analyzer issues:

    Analyze /Users/wanghongqing/AwesomeProject/node_modules/react-native/ReactCommon/yoga/yoga/YGNodeList.c
    Analyze /Users/wanghongqing/AwesomeProject/node_modules/react-native/ReactCommon/yoga/yoga/Yoga.c
(2 commands with analyzer issues)

The following build commands failed:
    PhaseScriptExecution Install\ Third\ Party /Users/wanghongqing/AwesomeProject/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/double-conversion.build/Script-190EE32F1E6A43DE00A8543A.sh
(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/AwesomeProject.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

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

原来在GitHub上面已经有人遇到同样的问题，并且已经解决了。

但是经过个人实践，不推荐用GitHub上面的解决办法，原因在下面GitHub修改的方法里描述了。

第一种解决办法

📌打开项目目录下的package.json文件

• 将react版本指定为16.0.0-alpha.6（默认情况下是16.0.0-alpha.12）
• 将react-native版本指定为0.44.3（默认情况下是0.45.1）
• 将react-test-renderer版本指定为16.0.0-alpha.6（默认情况下是16.0.0-alpha.12）

📌删除项目文件夹下的node_modules文件夹

📌终端执行命令

npm install

此时会重新生成react-native(v0.44.3)的 node_modules文件夹

📌再次执行

react-native run-ios

当你看到又有一个终端页面打开的时候，恭喜你！你成功了！

第二种解决办法（GitHub 上的解决办法）

📌下载boost_1_63_0(541.4M)

📌在你项目的下面目录下将boost_1_63_0文件夹删除

~/Desktop/TestReactNativeProject/node_modules/react-native/third-party/boost_1_63_0

注意：
~/Desktop/TestReactNativeProject/是你自己项目文件夹的位置，自己修改一下就好了。

📌并且用新下载的文件夹替换

这样做有一个缺点：

• 本来文件夹80M，结果新下载的文件夹540M，多少有点坑
• 启动APP特别慢，因为文件突然增大那么多，编译、链接的时间增加了，当然就慢了。

🍺再次运行程序

react-native run-ios

程序正常启动

** BUILD SUCCEEDED **


Installing build/Build/Products/Debug-iphonesimulator/TestReactNativeProject.app
Launching org.reactjs.native.example.TestReactNativeProject
org.reactjs.native.example.TestReactNativeProject: 13678

---

🌎用 Xode 运行

当你做到这里的时候，你一定急着想用Xcode打开尝试一下，你满心欢喜的打开了Xcode，点击run，发现程序可以正常跑起来了。如果没什么意外应该是没有什么其它问题了。

但是，实际上我也遇到了不少的问题

但是当你进入到AppDelegate.m文件内的时候，突然发现，#import <React/RCTBundleURLProvider.h>报错了。

❌报错内容是

'React/RCTBundleURLProvider.h' file not found

✅解决办法

我尽了自己能做到的努力，查阅了网上包括GitHub上面的issue、StackOverFlow上面的各种回答。都没很好的解决问题，我只能一步一步的重头再来。突然发现之前我有个地方没有同步版本号。

改正之后就再也没有复现此问题了。大家小心掉坑里。

---

❌如果你在运行的时候也遇到了下面的问题

'boost/iterator/iterator_adaptor.hpp' file not found

那么请你还是参照修改package.json文件并且更改react-native版本号的方法，就会解决的，具体方法参见上文。

至于这里为什么一定要指定成0.44.x版本呢：
因为如果你用的React Native是最新的版本v0.45.1的话，需要下载 boost编译，因为被墙了所以会无法运行。

❌如果你运行程序也出现了如图所示的状态

No bundle URL present

那么请确认你是不是shadowsocks设置成全局模式了。

如果是

• 请关闭shadowsocks
• 或者将shadowsocks设置成自动代理模式

参考：

1. React Native中文网-搭建开发环境
2. facebook/react-native
3. 'boost/iterator/iterator_adaptor.hpp' file not found #14423
4. React Native开发错误警告处理总结（已解决 ！持续更新）
5. React Native初始化项目后执行react-native run-ios，构建失败