配置React-Native开发环境

React Native简介

React Native已经Facebook开源,就引起了业界的关注,越来越多的开发者开始尝试在生产中 使用它。React Native为JavaScript开发跨终端应用提供了更加丰富的想象空间。下面就介绍一下环境配置。

环境搭建-React Native主要依赖的环境

• Mac OS X操作系统。
• Xcode 6.4或者更高版本
• 安装Node.js 4.0或者最新版本
• 建议使用Homebrew安装:watchman和flow。

安装Node.js

1. 打开网址：https://nodejs.org/ 从中可 以看到最新的版本以及下载按钮。

   等待下载完成后,我们开始安装Node.js。node-v5.7.1.pkg 文件,將弹出如图1-1所示的界面
   

   在上图中,我们可以看到This package will install Node.js v5.7.1 and npm v3.6.0 into /usr/local/.
   这句话,这表明将会安装Node.js V5.7.1版本和npm v3.6.0版本

2. 接着点击“继续”按钮,会看到许可界面,再点击“继续”按钮,将看到许可提示,如图
   
   
   点击“同意”按钮

3. 点击“同意”按钮,会出现如下图所示的界面。
   
   点击“为这台电脑上的所有用户安装”否则”继续“按钮不可点
   
   点击继续开始安装，当然可以自定义安装位置。。。，我们不更改安装位置,直接使用默认值即可。然后点击“安装”按钮,输入你 的电脑的密码(一般用户都设置了电脑密码),再点击“安装软件”开始安装程序。显示了“安装成功”,表示Node.js安装成功,此时直接点击“关闭”按钮即可（不再截图展示）。

4. 在安装成功的图中,我们可以看到如下信息:Node.js was installed at /usr/local/bin/node
npm was installed at /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.
   以上信息表明,Node.js安装在/usr/local/bin/node目录下,npm安装在/usr/local/bin/npm目录下。 我们可以通过Mac终端命令切换到/usr/local/bin/目录下,从中可以看到安装的Node.js和npm
   要确保/usr/local/bin在我们的环境变量%PATH中,一般默认都在

5. 此时,我们在终端中输入命令node -v,就可以看到刚才安装的Node.js的版本，表示Node.js安装成功LIST：
   到此Node.js 安装成功

安装ReactNative

1. 在正式安装React Native之前,需要确保以下环境是可用的。

2. Node.js已经安装且在环境变量中。如果没有安装,可以参考上文。

3.  Xcode已经安装且版本最好是6.4以上版本 Xcode的安装这里就不做介绍了（Xcode都不会安装还做毛RNA 0.0）。

4.  推荐安装Homebrew,同时通过Homebrew安装watchman和flow。

5. 通过Homebrew安装watchman和flow的命令如下:

• $ brew install watchman

• $ brew install flow

现在万事具备,只欠东风。我们通过npm安装react-native-cli的命名行工具。在Mac终端中输 入如下命令,其中-g表示全局安装:

• $ npm install -g react-native-cli

如果在安装过程中发现需要管理员权限,可以给命令添加sudo,然后输入管理员密码即可:

• $ sudo npm install -g react-native-cli
  如果安装耗时较长,可以采用淘宝镜像安装（淘宝镜像就不贴了，这都不知道还搞啥 -_-///）

使用NVM管理Node.js版本

1. 因为需要经常切换Node.js版本,所以建议使用NVM(Node.js Version Manager)来管理Node.js
   版本。NVM在GitHub上的地址是https://github.com/cnpm/nvm(这里使用cnpm的NVM)。
   首先,我们使用git命令将代码克隆下来。例如,在命令行中输入git clone命令:

2. git clone https://github.com/creationix/nvm

3. 为了临时使用nvm命令(只针对当前bash),在终端中输入如下命令:

4. $ cd nvm(新版没有该目录)

5. $ source nvm.sh

6. 这样我们就可以用nvm对Node.js和io.js进行版本管理了。在终端中输入nvm命令,可以看到命 令帮助: nvmNodeVersionManagerUsage:nvmhelpnvm–versionnvminstall[−s]nvmuninstallnvmusenvmrun[]nvmcurrentnvmlsnvmlsnvmls−remotenvmdeactivatenvmalias[]nvmaliasnvmunaliasnvmreinstall−packagesnvmunloadnvmwhich[]Example:nvminstallv0.10.32nvmuse0.10nvmrun0.10.32app.jsnvmexec0.10.32nodeapp.jsnvmaliasdefault0.10.32Note:toremove,delete,oruninstallnvm−ShowthismessagePrintoutthelatestreleasedversionofnvmDownloadandinstalla,[−s]fromsource.Uses.nvmrcifavailableUninstallaversionModifyPATHtouse.Uses.nvmrcifavailableRunwithasarguments.Uses.nvmrcif6currentversionUnload‘nvm′fromshellDisplaypathtoinstallednodeversion.Uses.nvmrcifavailableInstallaspecificversionnumberUsethelatestavailable0.10.xreleaseRunapp.jsusingnodev0.10.32Run‘nodeapp.js′withthePATHpointingtonodev0.10.32Setdefaultnodeversiononashell898justremove /.nvm, /.npm,and /.bowerfolders我们使用nvm命令来查看远程Node.js版本有哪些: nvm ls-remote

创建项目

搭建好React Native环境后,现在来创建项目Hello。在命令行中使用react-native init命令:
$ react-native init Hello
This will walk you through creating a new React Native project in /Users/lihua/work/Hello

[email protected] install /Users/lihua/work/Hello/node_modules/react-native/node_modules/ws/node_ modules/bufferutil
node-gyp rebuild
CXX(target) Release/obj.target/bufferutil/src/bufferutil.o SOLINK_MODULE(target) Release/bufferutil.node
这里省略了安装过程的信息
To run your app on iOS:
Open /Users/lihua/work/Hello/ios/Hello.xcodeproj in Xcode Hit Run button
To run your app on Android:
Have an Android emulator running, or a device connected cd /Users/lihua/work/Hello
react-native run-android
到目前为止,我们已经创建好了项目,可以看到Open /Users/xxx/Hello/ios/Hello.xcodeproj in Xcode,这提示我们使用Xcode打开项目

操蛋！打不开抛红咋办

解决方案1

1. 在终端运行如下指令：sudo rm -rf /opt/local \ /Applications/DarwinPorts \ /Applications/MacPorts \ /Library/LaunchDaemons/org.macports.* \ /Library/Receipts/DarwinPorts*.pkg \ /Library/Receipts/MacPorts*.pkg \ /Library/StartupItems/DarwinPortsStartup \ /Library/Tcl/darwinports1.0 \ /Library/Tcl/macports1.0 \ ~/.macports

2. 如果以上指令运行时出现 error, 可以尝试以下指令：brew uninstall pcre && brew install pcre
3. 完成之后，你需要重新使用brew安装watchman ，指令如下：brew install watchman --HEAD
4. 安装完成后，查看以下watchman的版本号，如果版本号是基于4.0 以上，重新在xcode 打开项目，运行项目，如果终端正常运行，没有显示错误，则说明是watchman安装的问题。

解决方案2

1. 打开终端，输入
   brew update
   成功后再输入
   brew upgrade watchman
   关掉Xcode重新运行即可
   如果你这么就解决问题了就好了.. 我自己brew update的时候遇到这样的问题
   No such file or directory - /usr/local/Library/Formula/.brew.67541.1327099610
   解决方法：
   依次输入
   sudo chown -R $USER:admin /usr/local
   cd /usr/local
   git reset –hard origin/master
   brew update
   再brew upgrade watchman
   再次运行，应该可以了！

Fuck！！！终于好了。希望能帮到大家。
群主QQ：490986262 iOS中高级技术交流群：52893074 欢迎大家踊跃加入