简介

        此系列的文章主要是在学习React Native官网参考资料时整理的,因为官网写的主要是英文,而且有些操作步骤描述的并不是很详细,所以决定在此记录一下,为了后面工作开发时能进行快速开发,如果能帮助到刚入门的小伙伴,那就更开心了。


安装部署所用软件及安装包


  • Node(高于8.3版本)
  • Python(必须为2.X)
  • jdk(版本必须为1.8)
  • Android Studio(默认最新版)


安装部署操作步骤

1、Node环境安装部署(高于8.3)

1.1、打开地址“​​https://nodejs.org/en/download/​​”来下载相应版本的安装包,如下:

01 React Native入门——环境安装部署_React Native入门

1.2、安装过程略。一路点击Next即可,中间如果有需要的话更改下安装路径,其余的全部默认,但是在安装过程中有个地方需要注意:

01 React Native入门——环境安装部署_React Native开发环境部署_02

        记得勾选上面框选中的选项,它会自动配置node的系统变量,安装完成后你无需自己配置。

1.3、安装完成后打开命令行工具,输入以下命令测试:

01 React Native入门——环境安装部署_React Native开发环境部署_03

2、Python环境安装部署(2.X)

2.1、打开地址“​​https://www.python.org/downloads/​​”下载相应安装包,然后双击安装,如图:

01 React Native入门——环境安装部署_android_04

2.2、安装过程略。同样的,期间也要勾选如图所示的选项,实现自动配置python路径(最下面一项):

01 React Native入门——环境安装部署_React Native开发_05

2.3、安装完成后,命令行通过以下命令进行测试:

01 React Native入门——环境安装部署_android_06

3、jdk环境安装部署(1.8版本)

3.1、打开地址“​​https://www.oracle.com/technetwork/java/javase/downloads/index.html​​”来选择下载相应的安装包,如图:

01 React Native入门——环境安装部署_React Native开发_07

3.2、安装过程略。安装期间会弹出两次选择路径的界面,第一次是jdk的安装路径,第二次是jre的安装路径,可以自行选定,然后一路Next。

3.3、安装完成之后我们进行java的环境部署,请参考文章中的新建系统变量部分,部署完成后命令行输入以下命令进行测试:

01 React Native入门——环境安装部署_android_08

4、Android Studio安装部署

4.1、打开地址“​​https://developer.android.com/studio/index.html​​”下载安装包,然后安装软件,安装路径中的文件夹名称不允许有空格。

01 React Native入门——环境安装部署_React Native_09

4.2、安装过程略。安装完成之后,选择运行此软件,第一次运行时会弹出配置界面,选择【cancel】,如图:

01 React Native入门——环境安装部署_React Native入门_10

        然后选择定制安装,安装所需的组件,在此处确保安装以下的组件:


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

        如图(此图并没有列出SDK Platform):

01 React Native入门——环境安装部署_React Native_11

        安装配置完成后,我们在软件启动界面选择【Configure】,在 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"来下载和安装这些组件。

4.3、配置环境变量

        添加系统环境变量,然后指定android sdk的安装路径,如图:

01 React Native入门——环境安装部署_React Native入门_12

        然后在系统级变量“Path”中添加platform-tools的目录。

5、新建第一个项目

5.1、进入相应的文件夹,然后打开命令行工具,通过命令:

react-native init myfirstapp

        来创建一个react native应用,然后我们进入到这个文件夹发现,在它里面有ios和android的两个文件夹,如图:

01 React Native入门——环境安装部署_React Native开发环境部署_13

5.2、通过Android Studio来打开这个android文件夹,然后在软件的右上角点击【AVD Manager】来创建一个虚拟设备,参数默认,如图:

01 React Native入门——环境安装部署_React Native入门_14

01 React Native入门——环境安装部署_android_15

5.3、在新建的虚拟设备列表后面有个绿色的三角形,我们点击它来启动这个虚拟设备,如图:


01 React Native入门——环境安装部署_React Native开发环境部署_16

5.4、然后在命令行进入我们项目的根目录,通过命令:

react-native run-android

        来启动,然后在虚拟设备就可以看到效果,如图:

01 React Native入门——环境安装部署_android_17

01 React Native入门——环境安装部署_android_18

5.5、到此为止,我们介绍了React Native的开发环境部署及第一个实例的创建运行工作,后面继续介绍在真机中如何运行以及更多开发方法。


总结

        本文从所需安装开始介绍,大致介绍了开发环境如何部署以及第一个demo的编写运行,其中Android Studio的安装部署部分介绍的可能不是很详细,因为在部署过程中并没有及时截屏,所以仅仅抓取了几张关键的图片,各位如果遇到问题,欢迎骚扰~