React Native 开发环境搭建

Posted 2022-12-12 殇神马

一、前言

React Native 是Facebook推出的一个移动跨平台框架，就是使用javascript和React
编写原生移动应用即android和ios应用;
React Native应用是真正的移动应用，并不是‘“网页应用”，或者“html5应用”，又
或者“混合应用”；React Native编写的应用，从使用感受上和用Obejct-C或者Java编写的应用几乎是无法区分的；React Native所使用的基础组件和原生应用完全一样；

二、环境搭建

我们这里的环境搭建是以Windows为开发平台,Android为目标平台来搭建React
Native 开发环境的;

需要安装的依赖
Node、Python2、JDK、Android Studio

1.安装Node

Node下载地址：https://nodejs.org/en/
注意：Node的版本应该大于等于12，安装完Node之后建议设置npm镜像（淘宝源）以加速后面的过程（或者使用科学上网工具）

使用nrm工具切换淘宝源，在cmd中使用以下命令

npx nrm use taobao

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载，
在cmd中执行以下命令

npm install -g yarn

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

2.安装Python2

Python的下载地址：https://www.python.org/getit/
注意：Python 的版本必须为 2.x（不支持 3.x）

3.JDK

从Oracle官网下载JDK,配置环境变量;
Windows下配置JDK环境变量步骤太常见了，就不做详细介绍
注意：JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）

4.安装Android Studio

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。
安装好Android Studio之后，需要配置Android的环境变量
（1）配置 ANDROID_HOME 环境变量
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译

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

（2）把一些工具目录添加到环境变量 Path 中
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编

辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

%ANDROID_HOME%\\platform-tools

%ANDROID_HOME%\\emulator

%ANDROID_HOME%\\tools

%ANDROID_HOME%\\tools\\bin

如果已经打开了cmd，cmd窗口需要关闭后重新打开，这样cmd中执行一些编译Android应用操作时，新的环境变量才能生效。

三、创建一个React Native项目

（1）创建一个React Native项目

React Native的环境搭建好之后，我们就可以创建一个React Native项目了;
在CMD命令行中输入以下命令创建一个React Native项目

npx react-native init ReactNativeDemo

这里的RaectNativeDemo是项目名称

（2）编译并运行创建的React Native项目

我们这里的目标平台是Android ;
-首先你的步骤一中搭建环境变量时，Android环境变量配置成功；
-然后要保证启动了一个Android模拟器，或者连接上了真机；
可以在cmd中通过adb devices查看是否打开了模拟器或者是否连接上了真机
-在cmd中进入到项目目录,然后使用以下命令编译运行项目

yarn android

或者

yarn react-native run-android

四、React Native项目代码编辑器

我们可以使用任何编辑器来编写React Native代码，这里推荐两个比价好的编写React Native代码的编辑器；

（1）WebStorm

下载WebStorm编辑器
https://www.jetbrains.com/zh-cn/webstorm/

WebStorm编辑器试用到期解决办法:https://www.downkuai.com/soft/118668.html

WebStorm配置ReactNative开发
可参考：
https://pgzxc.com/posts/c8be3adf.html
https://pgzxc.com/posts/c8be3adf.html

（2）Visual Studio Code

下载Visual Studio Code
https://code.visualstudio.com/

配置React Native开发

在Visual Studio Code的Extensions中搜索React Native Tools 插件安装
在CMD中创建一个React Native项目
将创建好的项目拖到Visual Studio Code中
在Run下点击 Add Configuration
在配置中选择 React Native :Debug Android