小杨--个人笔记

# React Native

# 搭建开发环境

# 官网网址

React Native 官网
Node 官网
Python 官网
Java SE Development Kit (JDK)
Android Studio
廖雪峰 官网对Python的安装介绍 HAXM （Intel 虚拟硬件加速驱动）

# 安装依赖

必须安装的依赖有：Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

注意 Node 的版本必须大于等于 10，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

# Yarn、React Native安装

Yarn、React Native的命令行工具（react-native-cli）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

// 安装依赖
npm install -g yarn react-native-cli
// yarn设置镜像源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

# Python安装

Windows上安装Python：

从Python的官方网站python.org下载最新的2.7版本，网速慢的同学请移步国内镜像。

注意

要确保一定选上pip和Add python.exe to Path，然后一路点“Next”即可完成安装。

An image

默认会安装到C:\Python27目录下，然后打开命令提示符窗口，敲入python后，看到下面的画面，就说明Python安装成功！(注：输入exit()即可退出或者直接点X关闭命令提示窗口)

An image

# JDK安装

从官方网址下载，点击下载后会跳转到注册页面，需要完成注册才能下载（比较恶心：只能注册后才能下载）。

An image

安装好之后，然后打开命令提示符窗口，输入“java -servion”或者输入“java”，如果出现以下界面，就说明JDK安装成功。

An image

# Android 开发环境

注意

译注：请注意！！！国内用户必须必须必须有稳定的翻墙工具，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些翻墙工具可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。总之如果报错中出现有网址，那么 99% 就是无法正常翻墙。

  1. 安装 Android Studio

安装时，确保已经勾选以下，如图所示：

An image

然后一直点击next，然后选择“Do no import settings”,然后“取消”>"取消"，直至出现如下界面，界面中选择"Custom"选项 An image

然后出现如下界面，确定勾选如图所示内容：

An image

确保选中了以下几项：

● Android SDK
● Android SDK Platform
● Performance (Intel ® HAXM) (AMD 处理器看这里)
● Android Virtual Device

然后点击"Next"来安装选中的组件。

如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。

安装完成后，看到欢迎界面时，就可以进行下面的操作了。

  1. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

An image

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

● Android SDK Platform 28
● Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

勾选上述选项，如图红色圈中部分所示：

An image

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

An image

最后点击"Apply"来下载和安装这些组件。Android Studio的默认安装路径为：

C:\Program Files\Android
  1. 配置 ANDROID_HOME 环境变量

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

An image

SDK 默认是安装在下面的目录：

C:\Users\Administrator\AppData\Local\Android\Sdk

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

  1. 把 platform-tools 目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。

An image

此目录的默认路径为：

C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools

# 创建新项目

react-native init AwesomeProject // AwesomeProject为文件名

# 使用 Android 模拟器

你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样：

An image

如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next"，然后选择Pie API Level 28 image.

注意

如果你还没有安装 HAXM（Intel 虚拟硬件加速驱动），则先点击"Install HAXM"或是按这篇文档说明来进行安装。

然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了，启动完后我们可以尝试运行应用。如果出现如图所示问题，则需要重新安装HAXM，具体安装步骤见下文。

An image

# HAXM安装

下载最新版本HAXM，解压后，双击“intelhaxm-android.exe”进行安装，首先点击“Remove”，先卸载，然后重新安装，如果安装时出现如图所示，则大概意思翻译为电脑上的BIOS中虚拟器未开启，具体解决方法如下：

An image

解决方法如下：

  1. 根据计算机型号，进入BOIS命令（开机按F2、F12、DEL、ESC等键可进入），根据自己电脑型号查询具体进入方式
  2. 进入BIOS命令后，找到Configuration选项或者SecurSecurity选项，然后选择Virtualization或者Intel Virtual Technology进入
  3. 将其中的unenable改为enable
  4. F10保存之前的设置，然后重启计算机

解决之后，重新安装HAXM，然后重新打开Android Studio中的模拟器，就可以看到如下图所以模拟器了。

← Taro多端开发 →