02、RN 系列之 环境搭建

版权声明：本文为博主原创文章，未经博主允许不得转载。

PS:转载请注明出处 作者: TigerChain 地址: www.jianshu.com/p/62d37fdbe… 本文出自 TigerChain 简书 ReactNative 系列

教程简介

• 1、阅读对象

本篇教程适合新手阅读，老手直接略过

• 2、教程难度

  初级

我们知道 ReactNative 的综旨是：Learn Once , Write anywhere，有道是：工欲善其事，必先利其器，要学习 RN ,首先我们就要把环境搭建起来，废话不多说我们直接进入正题

一、 环境搭建「以下是针对 Android 环境」

1、Windows 环境下安装

安装依赖

我们要安装 node python2 JDK 和 AndroidStudio

1、安装 node python 和 JDK

有两种安装方法，快速方法「方法2」和常规方法「方法1」

方法1：

我们分别去 JDK Node 和 python 官方几网站把对应的包下载下来进行安装，然后配置环境变量即可，我在 windows 上面使用的是此方法安装的

方法2：

官方推荐使用 Chocolatey「windows 下的非常流行包管理器」来安装 node python 和 JDK

PS:安装 chocolatey 有几个前提：

1、windows 系统必须是 Windows 7+ / Windows Server 2003+
2、Powershell 要是 v2 以上的版本：
   Powershell 是运行在windows机器上实现系统和应用程序管理自动化的命令行脚本环境，可以看成是替代 md.exe 的
3、windows 系统必须是安装 .NET Framework 4+ 以上的版本

复制代码

• 1、假使你安装好了 chocolatey ，可以根据官网 chocolatey.org/ 里面的 install 去安装「由于我这里是 mac 系统就不多做说明了」

• 2、chocolatey 安装以后，我们就可以在命令行中安装 node 和 python2 了,使用 choco install 命令

choco install -y nodejs.install python2 jdk8
复制代码

确保我们安装的 node 是 4 或以上的版本，java 是 8 或以上版本

2、安装 React Native 命令行界面「cli」

这里我们使用 npm 来安装，如果你安装了 node 就会自带，这里我们全局安装

npm install -g yarn react-native-cli
复制代码

3、安装 AndroidStudio「简称 AS」

• 1、下载 AS 下载地址：developer.android.google.cn/studio/inde…「Google 对中国开放了开发者网站，可以下载，不存在墙的问题」

• 2、安装 AS

安装 AS 过程请不要随意改动 AS 的选项，默认使用 SDK 是最新的，RN 需要至少是 Android 6.0 的 SDK，所以默认安装的没有问题。

• 3、配置 AS 环境变量 ANDROID_HOME

ANDROID_HOME 指向了你安装 Android SDK 的路径，打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，举个例子，下图的路径可能你本机的不一样，请根据本机的地址设置

2、Mac 环境下安装

安装依赖

在 mac 安装我们需要安装一些依赖-- node、Watchman、React Native 的命令行工具、JDK 和 AndroidStudio

1、安装 Homebrew

打开命令行并输入：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
复制代码

2、使用 brew 安装 node 和 watchman

brew install node
brew install watchman
复制代码

3、安装 react native 命令行工具

npm install -g yarn react-native-cli
复制代码

4、下载安装 JDK 、Android Studio

此步骤和 Windows 上安装是一样的，就是配置 ANDROID_HOME 有点不一样「mac 上环境变量的配置」

打开 $HOME/.bash_profile 文件 或是 .zshrc 文件，输入以下内容

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
复制代码

以上就完成了 RN 的安装，按照官网步骤一步步来就可以了。

二、测试环境

在上面我们搭建好了 RN 的环境，我们来测试一下，打开终端输入：react-native --version 就会有以下信息

react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
复制代码

这里说明我们安装好了 RN 。

创建项目

1、创建 RN 项目的命令「在终端中使用」：

react-native init 项目名称
复制代码

2、新建一个项目

在这里我们直接创建一个项目的来直观的感受一下吧

• 1、在指定目录「我这里在桌面」新建 myfirstdemo

react-native init myfirstdemo
复制代码

如下图所示「部分截图」：

... 省略部分截图

我们可以看到成功的创建了一个项目，可以使用 react-native run-android 或 react-native run-ios 运行项目了，在这里我们运行 Android 项目

• 2、运行项目

2.1 打开模拟器

首先，要打开模拟器，或是连接上真机「真机上会有坑」，我们先连接模拟器，运行一下「这里使用 genymotion」

我们打开 genymotion

2.2 运行项目

我们运行 react-native run-android，会出现以下命令，就是下载一些依赖包

过了一会作界面出来了

我肋个 ** 什么情况，既然挂了「大概意思就是说运行 assets 包是否正确或服务是否开启」，不怕，我们来解决，具体来说三个步骤搞定

首先，我这里服务肯定是运行的，那么就可能是包有问题了，果不其然进入到 android 项目中，没有 assets 文件夹，如下图：

确实没有 assets 文件夹，我们按如下步骤进行：

• (1)、项目目录中使用 mkdir android/app/src/main/assets 创建 assets 目录
• (2)、运行 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

• 3、执行 react-native run-android 即可

除了以上方法，还可以在 package.json 中去配置，具体解决办案可以看 这里

经过以上步骤，我们运行了 react-native run-android 就可以看到我们第一个 RN 项目了，不容易呀「内心有没有小窃喜呀!!!」

对于 IOS 的环境，我们可以的看 RN 的中文网 ，当然英文基础好的话，建议看官网文档。

到此为止，我们就完成了 RN 环境的搭建，下一节我们正式开始 RN 之旅吧