rn_evn.png
版权声明：本文为博主原创文章，未经博主允许不得转载。
PS:转载请注明出处
作者: TigerChain
地址: http://www.jianshu.com/p/62d37fdbedbb
本文出自 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 上面使用的是此方法安装的
python2.png
方法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 ，可以根据官网 https://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 下载地址：https://developer.android.google.cn/studio/index.html「Google 对中国开放了开发者网站，可以下载，不存在墙的问题」
-
2、安装 AS
安装 AS 过程请不要随意改动 AS 的选项，默认使用 SDK 是最新的，RN 需要至少是 Android 6.0 的 SDK，所以默认安装的没有问题。
- 3、配置 AS 环境变量 ANDROID_HOME
ANDROID_HOME 指向了你安装 Android SDK 的路径，打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，举个例子，下图的路径可能你本机的不一样，请根据本机的地址设置
react-native-android-sdk-environment-variable-windows.png
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-init.png
... 省略部分截图
react-native-init2.png
我们可以看到成功的创建了一个项目，可以使用 react-native run-android 或 react-native run-ios 运行项目了，在这里我们运行 Android 项目
- 2、运行项目
2.1 打开模拟器
首先，要打开模拟器，或是连接上真机「真机上会有坑」，我们先连接模拟器，运行一下「这里使用 genymotion」
我们打开 genymotion
genymotion.png
2.2 运行项目
我们运行 react-native run-android，会出现以下命令，就是下载一些依赖包
down-dep.png
过了一会作界面出来了
rn-run-error.png
我肋个 ** 什么情况，既然挂了「大概意思就是说运行 assets 包是否正确或服务是否开启」，不怕，我们来解决，具体来说三个步骤搞定
首先，我这里服务肯定是运行的，那么就可能是包有问题了，果不其然进入到 android 项目中，没有 assets 文件夹，如下图：
no-assets.png
确实没有 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
resove-rn-error.png
- 3、执行 react-native run-android 即可
除了以上方法，还可以在 package.json 中去配置，具体解决办案可以看 这里
经过以上步骤，我们运行了 react-native run-android 就可以看到我们第一个 RN 项目了，不容易呀「内心有没有小窃喜呀!!!」
first-rn.png
对于 IOS 的环境，我们可以的看 RN 的中文网 ，当然英文基础好的话，建议看官网文档。
到此为止，我们就完成了 RN 环境的搭建，下一节我们正式开始 RN 之旅吧
网友评论