ReactNative环境搭建

一、React Native概述

React是一个构建用户界面的JS框架，实现了数据的响应式和组件化开发，本身既可以用于Web网站项目，也可以用于创建移动端App项目。

相较于Vue.js在移动端只能构建WebApp，React生态系统中有一个可以构建“真正原生App”的扩展 —— React Native，可以这样说：“React Native是React生态圈可以傲视其它对手的绝对功臣”。

原理：React Native应用中的JS代码，在开发运行阶段会被编译为原生的Java或OC代码

React Native英文官网：https://reactnative.dev/

React Native中文网：https://www.react-native.cn/

二、React Native开发/运行环境搭建

开发平台：Windows

目标平台：Android

1.安装依赖

必须安装的依赖有：Node、JDK 和 Android Studio。

1.1安装Nodejs（版本大于V14）

下载地址：https://nodejs.org/en/download/

查看版本：node -v

1.2安装JDK（版本大于V11）

下载地址：https://www.oracle.com/java/technologies/downloads/#java11（下载需注册登录）

备用地址： https://423down.lanzouo.com/iFuI6yyvnyb

安装步骤如下：

1.下载完成打开安装包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wy23VGOS-1658146751557)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718191406906.png)]

2.修改安装路径，默认路径也可以

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FVgvxwXE-1658146751559)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718191726646.png)]

3.开始漫长的安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HjmMR1Z1-1658146751560)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718191748404.png)]

4.安装完成，点击关闭即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXXOm9Dg-1658146751561)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718191941567.png)]

查看版本：javac -version

1.3安装Android Studio（原生Android开发必备工具）

下载地址：https://developer.android.google.cn/studio/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5qNwN3sa-1658146751562)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718192033098.png)]

安装步骤：

1.打开下载好的安装包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ahIY2BF-1658146751564)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718192707905.png)]

2.点击Next

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DkeftaOW-1658146751565)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718192742461.png)]

3.修改安装路径，默认也可，然后Next

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OXq3Jiz1-1658146751566)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718192901257.png)]

4.正在安装，完成后点击Next下一步后点击Finish

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VuVf5LPx-1658146751567)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718193025017.png)]

5.完成后运行界面，点击Next

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-55HUwgpg-1658146751569)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718193317287.png)]

6.安装界面中选择"Custom"选项

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k2KtVZlR-1658146751569)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718193804433.png)]

7.勾选同意(Accept)所有的使用条款即可。接下来开始下载将近400MB的资料…[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XPgdhRqS-1658146751570)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718194236626.png)]

7.内存的选择，根据情况选择就好，最好不要低于2G（2048MB）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D0AYtljU-1658146751571)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718194454028.png)]

8.然后就是next-finish完成下一步就好，在 SDK Manager 中选择"SDK Platforms"选项卡，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TQbzgT2x-1658146751572)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718194752865.png)]

然后在右下角勾选"Show Package Details"。展开Android 11 ®选项，确保勾选了下面这些组件：

- Android SDK Platform 30

- Intel x86 Atom_64 System Image

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igP44zmK-1658146751574)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718195416210.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kKS335xf-1658146751575)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718195642508.png)]

然后还是在"SDK Tools"选项卡，点击"NDK (Side by side)“，同样勾中右下角的"Show Package Details”，选择20.1.5948944版本进行安装。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29Nl7PtH-1658146751576)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718195735826.png)]

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

2.配置ANDROID_SDK环境变量

WIN7：计算机→属性→高级系统设置→高级→环境变量;
WIN10：此电脑→高级系统设置→环境变量。

或者直接搜索环境变量打开。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtqVOhCX-1658146751577)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718200318195.png)]

1.新建，创建一个名为ANDROID_SDK的环境变量，变量值需要填写自己安装的路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CI2wtXcn-1658146751577)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718200649288.png)]

2.修改系统环境变量Path，编辑path环境变量，添加一个%ANDROID_SDK%；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4E500STZ-1658146751578)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718200947526.png)]

点击确定，确定，确定。所有的确定都要点才会保存好配置。然后重启Android Studio。

系统环境变量Path，编辑path环境变量，添加一个%ANDROID_SDK%；

[外链图片转存中…(img-4E500STZ-1658146751578)]

点击确定，确定，确定。所有的确定都要点才会保存好配置。然后重启Android Studio。