环境配置：React Native 开发环境配置

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 1.2k 阅读时长 ≈ 4 分钟

React Native 是 FaceBook 开源的一个项目，FaceBook 希望可以用写 Web App 的方式去写 Native App。它可以让我们用 JS 和 React 来开发应用，使用 React Native 可以通吃 Android 和 IOS ,以及 Web,仅仅需要一份业务逻辑代码就可以来创建我们的应用。

起源

React Native 是由 React 衍生出来的，而 React 起源于 Facebook 的内部项目，因为 FaceBook 对市场上所有 JavaScript MVC 框架，都不太满意，就决定自己写一套，用来架设自己的 Instagram 的网站。等做出来以后，发现这套东西很不错，而且好用，就在 2013 年 5 月开源了。

而衍生的 React Native 项目，希望用写 Web App 的方式去写 Native App。这样同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机上。FaceBook 最早发布的关于 React Native 是针对 IOS 的，而 React Native for Android 是在去年也就是 2015 年 9 月 15 日开源发布的。现阶段 React Native 的体验虽然已经很不错了，很接近原生应用的体验。

环境搭建

macbook，所以这次环境搭建是根据 mac 电脑来说的。

Homebrew 安装

Homebrew 是一款自由及开放源代码的软件包管理系统，用以简化 Mac OS X 系统上的软件安装过程，Homebrew 以 Ruby 语言写成，针对于 Mac OS X 操作系统自带 Ruby 的版本。默认安装在/usr/local，由一个核心 git 版本库构成，以使用户能更新 Homebrew。是 OS X 不可或缺的套件管理器。
安装之前，你可以先检查一下电脑上是否已经安装了 Homebrew，检查方式如下：
在终端执行下列命令：

1
brew - v;

如果已经安装了，就像下图一样，显示版本号。

image.jpg

如果没有安装，那就可以用下面这种方式，进行安装，在终端上直接输入下面的命令即可：

1
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Node.js 的安装

Node.js® 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。Node.js 之生态系统是目前最大的开源包管理系统。我们都知道 React Native 是需要使用 js 开发的，所以 Node.js 是必不可少的安装。

安装 Node.js 也很简单，如下：

1
nvm install node && nvm alias default node

可能你发现了，在 Terminal 终端上使用的命令是 nvm，如果你没有安装 nvm 是会提示 command not found 的，所以我们还得先安装 nvm。

安装 watchman 和 flow

  • Watchman 是 facebook 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等。
  • flow 是一个 Javascript 静态类型检查器。Flow 为 Javascript 添加了静态类型检查，以提高开发效率和代码质量。

安装方式如下：

1
2
brew install watchman
brew install flow

安装 React Native

我们使用 npm 进行安装，如下：

1
npm install -g react-native-cli

安装完 React Native 之后，要想运行或者初始化一个项目，然后运行到模拟器或者真机，我们需要搭建一个 Android 或者 ios 开发环境，我这里只介绍 android，相信想学习 React Native 的同学，电脑上都基本上有了 Android 的开发环境。但是可能会有坑，有一个大坑就是得配置 SDK 的环境变量：ANDROID_HOME。

SDK 环境变量的配置

  1. 启动 Terminal 终端工具

  2. 输入 cd ~/ 进入当前用户的 home 目录

  3. 创建：

    1
    touch.bash_profile;

  4. 打开并编辑：

    1
    open.bash_profile;

  5. 在文件中写入以下内容：export PATH=${PATH}:/Users/loonggg/Application/android-sdk-mac_x86/tools:/Users/loonggg/Application/android-sdk-mac_x86/platform-tools

    友情提示：上述路径，请换成自己电脑上的 SDK 所在路径

  6. 执行如下命令：

    1
    source.bash_profile;

  7. 验证：输入 adb 回车。如果未显示 command not found，说明此命令有效，环境便亮设置完成。

创建我们的第一个 React Native 应用

初始化项目

1
react-native init AwesomeProject

上面的 AwesomeProject 这个项目名字，你可以自己随意定义，自己命名，没有限制。

运行项目

  • 切换到 AwesomeProject 的主目录
  • 运行项目命令
1
2
react-native run-android
react-native run-ios
  • 我们使用编辑器打开和修改 app.js 文件，调出模拟器菜单键，选择重新载入 js 即可看到变化。

到这里我们就把环境配置讲完了。