React-Native入门教程（一）：环境搭建及Hello World

文章目录

一、关于React Native
二、环境搭建

2.1 安装依赖
2.2 Android开发环境

三、初始化一个新项目
四、使用Android Studio跑起来

一、关于React Native

1. 什么是React Native?

React Native（RN）是facebook开源的一套用于开发移动端跨平台App的技术框架。RN用于开发原生App可以解决基于Web开发的应用所面对的性能和权限问题。而React与RN之间，RN的开发过程不需要编写div和span标签，而要使用视图以及文本组件，以及有权限调用原生工具，
它与Cordova类似，但是，Cordova是运行在webview中，通过调用原生API获得原生级别的功能，而RN组件会被直接渲染成原生部件，可以为移动应用提供真正的原生体验，而Cordova应用在遇到滚动这样的高强度的UI交互场景时，可能会发生崩溃。

2. 相较于原生开的，React Native开发的优势？

传统开发痛点：

人员稀缺，一个app针对不同平台需要分端开发

开发成本高，需要android 和IOS两个团队，对于小团队不友好

代码复用率低：不同端代码不通用

无法动态更新，每次更新都需要向应用市场分别上传新的包，还要担心审核被拒等问题

React Native的优点：

跨平台、低投入高回报、性能高（比H5+WebView的方式高很多）、支持动态更新。

一才两用，开发成本低（只需要一端），代码复用率高，

二、环境搭建

在React Native官网可以看到有两套脚手架工具:expo-cli(沙箱环境)和react-native-cli（完整环境），expo对网络环境的要求比较高，很多依赖出自国外，不建议国内用户使用。

安装教程，官网说得很明白：安装依赖

2.1 安装依赖

注意事项：
1. Node版本必须 >= 10,Python版本必须为2.x(不支持3.x)，而JDK必须是1.8

# 使用chocolate快速安装
choco install -y nodejs.install python2 jdk8

chocolate是基于windows平台的包管理工具（就像一个软件管理应用）

1. Node安装

对于Node的安装建议直接到官网下载安装包来安装，也可以使用chocolate来安装。官网

2. Python 2.x

官网下载地址，注意选择2.x版本（即2.7.8）

3. jdk8

下载地址

2.2 Android开发环境

1. 安装Android Studio

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，可以通过google提供的开发者网站下载。安装界面中选择"Custom"选项，确保选中了以下几项：

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

2. 安装Android SDK

Android Studio 默认会安装最新版本的 Android SDK。而编译RN应用需要android 9,所以需要在安装后，通过Android Studio 的SDK Manager中选择安装各版本的 SDK。
你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

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

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

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

最后点击"Apply"来下载和安装这些组件。

3. 配置 ANDROID_HOME 环境变量

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录

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

编辑Path环境变量，新增指向 Sdk\platform-tools的地址

三、初始化一个新项目

npx react-native init myApp

通过react-native-cli创建myApp后可以看到，其生成如下目录：

__test__：为项目应用的用例测试文件
android：为编译后的android应用
ios:为编译后的ios文件
node_modules：项目依赖
其它如App.js：即我们要修改的应用文件

四、使用Android Studio跑起来

在这里，你可以使用真机也可以直接使用Android Studio自带的模拟器来运行运用，这里以模拟器为准。

File--> Open-->选择myApp下的android目录

此时，IDE会识别并进行一系列编译，等待一会儿后，可以点击运行试试。

注意：对于第一次使用的我来说，这里遇到个问题：Cannot find AVD system path. Please define ANDROID_SDK_ROOT, 原因是Android Studio自带的模拟器镜相并未安装，所以先把它delete，再通过Tools--> AVD Manager-->Create Virtual Device来新增设备，这里选择的是Nexus5,一路Next并安装成功后Finished，