转载来自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 的安装
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
网友评论