转载来自iOS 2018最新搭建 React Native 开发环境教程内容稍作了修改

React Native 简介

• ReactNative 是移动端目前最热的框架之一, 着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。
• Facebook 已经在多项产品中使用了 React Native，并且将持续地投入建设 React Native。
• React Native 可以通过更新远端 JS，直接更新 app, 用 JavaScript 调起 native组件，将增强与高性能组件交给 React Native 来处理 。
• 相比其他 hybrid 框架而言, React Native并非通过 webview 来调用原生组件,而是直接调用操作系统自带的 javascriptCore, 所以更高效。

环境搭建

官方中文文档
官方英文文档 [英语好的话可以看这个.]
主要的环境以iOS端为例:

• Mac OS X 操作系统
• Xcode, 7.3版本以上
• Node.js, 6.2.1版本以上
• watchman 和 flow
• NVM

下面图文结合详细介绍下 React Native 在 Mac 环境下的安装流程, 带你一步步搭建环境, 运行 第一个项目 Hello World.

安装过程请时刻保持翻墙状态

Xcode 的安装

App Store 安装

Node.js 的安装

官网安装Node.js

Node.js下载.png

Homebrew 的安装

官网安装Homebrew (macOS 缺失的软件包的管理器)
一步一步安装就好了

Homebrew安装.png
Homebrew安装1.png

通过 Homebrew 安装 watchman 和 flow

React Native 包管理器使用了 watchman ，flow 是 Facebook 公司出品的一个类型检查库，它同样被 React Native 所采用.

如果安装过程中遇到问题，你可能需要更新 brew 和相关依赖包,
使用的命令行： brew update brew upgrade.
如果出现错误，你需要修复本地的 brew 安装程序，brew doctor 可以帮助你找到问题所在。

安装好 Homebrew 之后，依次运行以下命（比较耗时）：

• brew -v 检查brew版本
• brew install watchman 安装watchman
• brew install flow 安装flow
  install watchman.png
  install flow.png

安装 react-native-cli 命令行工具

接下来通过 NPM 安装反应母语 -CLI 的命令行工具。在 MAC 终端中输入如下命令，其中 -g 表示全局安装。
sudo npm install -g react-native-cli

安装react-native-cli命令行工具.png

NVM 的安装

Reace Native 使用 NVM 管理不同的 node 和 npm.

在终端输入命令安装NVM:

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

安装NVM.png

进入nvm文件 在终端依次输入以下命令:

• cd nvm/
• ls
• source nvm.sh
• nvm
• nvm ls -remote N/A
• nvm ls

nvm依次命令行1.png nvm依次命令行2.png

创建项目

搭建好RN环境以后，我们来创建一个HelloWorld项目。
首先在桌面上创建一个名为 rn_helloworld 的文件夹
在终端进入创建的文件夹 (cd)
创建项目

init.png run.png

运行项目

直接运行就行啦.png
或者cd 进入文件夹后 终端运行项目也是可以的
react-native run-ios

项目运行起来, 打开App.js 就可以进行编程了, 编程保存后直接在模拟器上 command+R 刷新即可.

App.js编程.png