搭建react native一篇全

1577973864555-5f5c6bef-ab79-4ec8-8f48-b374679fccb5.png


必须安装的依赖有:node,Python2,和Java SE Development(JDK)和Android Studio
注意: Node的版本必须大于等于10,python的版本必须为2.x(不支持3.x),而JDK的版本必须是1.8(目前不支持1.9及更高版本)
1.node安装不必所说大家都会。咱们这里也有自己写的教程(教程
2.Python2安装更简单上官网下载直接装(python),注意是2,注意是2,注意是2
3.JDK的安装稍微有点麻烦要配置环境变量的。先下载(JDK下载):注意是1.8,注意是1.8,注意是1.8**
下载:
1.png


**
这个要补充一下,这个下载的时候需要登录Oracle的账号,我没有用元亮师傅的。

安装:
对于windows下安装只需要双击安装即可。
配置Path环境变量:
**
4.png

一.安装Android Studio

1.下载

首先下载AndroidStudio

5.png

2.安装

1.点击下载好的Android Studio

6.png


2.一直点击下一步

7.png




3.进入欢迎页面后(一下操作都是无脑操作,一直点下一步下一步)

8.png

9.png

10.png


出现这个页面也算是完成的差不多了,
这时候我们需要下载一Android SDK。
点击右下角的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"来下载和安装这些组件。
SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK

3.配置环境变量

配置环境是一件很头疼的事情,我也在这里卡了好久,不过最终还是弄好了,需要注意几点,下边详解:

1.配置 ANDROID_HOME 环境变量

*为什么要配置环境变量?
答:React Native需要通过环境变量来了解你的Android SDK装在什么路径,从而正常进行编译。
1.打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):
11.png


注意:它的默认安装路径是在C磁盘,这里安装在D盘的Local里的Android文件夹里了。如图:
11.png

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

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

注意:编辑Path的时候后边加分号;,还有你的路径问题要填正确。

二.创建新项目

全局安装react-native-cli,cmd命令npm install -g react-native-cli  
使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用node自带的npx命令来使用(注意init 命令默认会创建最新的版本):

注意:请不要单独使用常见的关键字作为项目名(如class, native, new, package等等)。请不要使用与核心模块同名的项目名(如react, react-native等)。请不要在目录、文件名中使用中文、空格等特殊符号。

安装命令:react-native init AwesomeProject
 

三.准备 Android 设备

这一步骤就是让你的项目跑在真机或者虚拟机上,需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机,也可以是模拟器(上边的Android Studio就带了模拟器,Android 官方提供了名为 Android Virtual Device(简称 AVD)的模拟器)。

1.使用 Android 真机

使用 Android 真机来代替模拟器进行开发,只需用 usb 数据线连接到电脑,然后遵照在设备上运行这篇文档的说明操作即可

2.使用 Android 模拟器

打开Android Studio创建项目到如下页面:

14.png

可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,它的图标看起来像这样:
15.png

创建模拟器
这里我创建了两个模拟器

16.png


打开一个模拟器


四.BUG总结:

在建模拟器的时候遇到一个很奇葩的BUG导致打不开模拟器了:
BUG类型 :
Cannot find AVD system path. Please define ANDROID_SDK_ROOT
解决过程:
使用版本低于25.2.3的android SDK Tools。
我们可以从AndroidStudio中文社区下载旧版的SDK Tools。比如 这里 下载24.2版本。
下载完成后解压,复制其中的tools目录,覆盖原来的tools目录即可。

Last modification:March 29th, 2020 at 02:16 pm
如果觉得我的文章对你有用,请随意赞赏