ReactNative环境搭建篇（Mac版）

引子

也说不出以后哪个技术会发展的特别好，哪个就特别差，今年我火？明年你火，谁要灭了谁？谁要被谁灭？这年头：三年看眼光，五年靠智慧，十年开外都是扯淡，只能看运气！所以，无论风云如何变幻，我们要做的就是，低头苦干，丰富自己，努力学东西，怀揣着热情和希望（讲话了：“今天很残酷，明天更残酷，但是（注意这里有个但是）后天很美好”。）以后无论干啥也都不会被人灭就行了。下面废话不多说，磨刀霍霍向牛羊吧！

一、安装Node.js

• Node.js官网：https://nodejs.org
  
  

  node
  
  然后就如切菜一般，行云流水，傻瓜式安装-----一直点到不能下一步位置。

二、利用Homebrew安装watchman和flow

• Homebrew官网：http://brew.sh/
  由于在写这篇文章的时候，我本地已经安装配置好了，所以从网上找到相关的命令行截图，方便大家参照对比。
  
  

  Homebrew.png
  • 2.1 打开终端直接粘贴上图你所复制的代码
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 2.2 查看brew版本，测试是否安装成功：在终端输入：
  brew -v
  如果出现
• 2.3 接下来通过brew安装watchman
  brew install watchman
• 2.4 接下来通过brew安装flow
  brew install flow
  具体出现什么代码之后可以进行下一步安装之类的，可以参考下面这张图：（2.2----2.4的步骤）
  
  

三、安装react-native-cli

• 检查是否有npm，在命令行输入
  npm -v

• 在mac终端中输入如下命令，其中-g表示全局安装
  sudo npm install -g react-native-cli

  
  
  

四、NVM安装

• 第一步：以下步骤都是在终端完成
  git clone https://github.com/creationix/nvm
• 第二步：进入nvm文件夹
  cd nvm/
• 第三步：
  source nvm.sh
• 第四步：
  nvm
• 第五步：
  nvm ls -remote
• 第六步：
  nvm ls
  注意：下图中第三步 ls可以省略，主要是为了看一下nvm文件夹下的具体文件，后面的一系列图都是终端输出的，贴上来，方便您对比参照，红色字体、蓝色边框圈住的部分是要自己在终端输入的
  
  
  
  
  

四、创建一个项目

• 在终端进入一个文件夹：比如我进入到桌面ReactNative文件夹下
  cd /Users/soufunlc/Desktop/ReactNative

• 初始化ZYDemo（这个过程有点长，跟网速有关，需要耐心等待）
  react-native init ZYDemo
  显示如下，则大功告成

  
  
  

  Paste_Image.png

五、运行程序

• 点击ios文件里的运行文件直接用xcode打开，然后command+R，运行就行，注意：在运行过程中，会自动打开终端，不要怕，这是程序在启动服务器而已，别管就行。最终

Paste_Image.png

六、调试项目（命令行操作）

• 在终端启动服务器：
  npm start
• 进入项目路径
  cd /Users/****/Desktop/ReactNative/ZYDemo
• 启动模拟器
  react-native run-ios

参考资料：
http://facebook.github.io/react-native/docs/getting-started.html
http://www.52learn.wang/archives/179
http://brew.sh/
https://github.com/facebook/react-native