转载

iOS 搭建 React Native 开发环境

一、ReactNative简介

ReactNative是移动端目前最热的框架之一, 着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)。Facebook 已经在多项产品中使用了React Native,并且将持续地投入建设React Native。

React Native 可以通过更新远端JS,直接更新app, 用 JavaScript 调起 native 组件,将增强与高性能组件交给 native 来处理 . 相比其他 hybrid 框架而言, ReactNative并非通过 webview 来调用原生组件,而是直接调用操作系统自带的 javascriptCore, 所以更高效。

二、环境搭建

如果英文好的可以查看 React Native官方文档 ,官方网站会提供最新的安装参考。

React Native 主要依赖以下环境:

  • Mac OS X操作系统

  • Xcode, 推荐使用7.3.0或者更高版本。

  • Node.js V6.2.1或者最新版本。

  • watchman和flow。

  • NVM

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

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

2.1. 安装Xcode

打开 App Store,在 App Store 中搜索 Xcode,点击 Xcode ,登录apple账号后直接下载安装即可。

iOS 搭建 React Native 开发环境

2.2. 安装Node.js

打开 Node.js官网, 直接下载.

iOS 搭建 React Native 开发环境

2.3. 安装Homebrew

打开 Homebrew官网, 语言选择简体中文, 按照文档步骤进行安装即可.

iOS 搭建 React Native 开发环境

安装完成后, 打开终端, 输入命令初始化 Homebrew.

命令为:

/usr/bin/ruby -e "$(curl -fsSL

https://raw.githubusercontent.com/Homebrew/install/master/install)"

iOS 搭建 React Native 开发环境

2.4. 通过brew安装watchman和flow

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

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

安装好Homebrew 之后,依次运行以下命(比较耗时时):

  • brew -v

  • brew install watchman

  • brew install flow

2.4.1 检查brew版本

iOS 搭建 React Native 开发环境

2.4.2 安装watchman

iOS 搭建 React Native 开发环境

2.4.3 安装flow

iOS 搭建 React Native 开发环境

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

接下来我们通过NPM安装反应母语-CLI的命令行工具。在MAC终端中输入如下命令,其中-g表示全局安装。

sudo npm install -g react-native-cli

这个步骤将会在你的系统全局安装 React Native 命令行工具。

iOS 搭建 React Native 开发环境

2.6. 安装NVM

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

2.6.1 在终端输入命令安装NVM:

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

iOS 搭建 React Native 开发环境

2.6.2 进入nvm文件

在终端依次输入以下命令:

cd nvm/

ls

source nvm.sh

nvm

nvm ls -remote N/A

nvm ls

iOS 搭建 React Native 开发环境

iOS 搭建 React Native 开发环境

2.7. 创建项目

搭建好RN环境以后,我们来创建一个HelloWorld项目。

  1. 首先在桌面上创建一个名为 rn_demo 的文件夹

  2. 在终端进入创建的文件夹 (cd)

  3. 创建项目

iOS 搭建 React Native 开发环境

2.8. 打开项目并运行

iOS 搭建 React Native 开发环境

iOS 搭建 React Native 开发环境

2.9. 打开App.js编程

项目运行起来, 打开App.js就可以进行编程了, 编程了直接 command+R运行即可.

iOS 搭建 React Native 开发环境

iOS 搭建 React Native 开发环境

三、总结

到此为止 React Native 环境已经搭建好了, 并可以进行 React Native 的开发啦,有没有很激动 哈哈.

在集成过程中遇到问题的可以给我留言,我看到后会第一时间回复, 希望能够帮到大家。

您的支持是我努力的动力, 感觉对你有所帮助的话不妨喜欢关注下哈!

作者:直男程序员

链接:https://www.jianshu.com/p/55b6340b9ec9

正文到此结束
Loading...