React native01原生应用程序(native App)：原生开发是基于某个移动平台(IOS或者Android)

一、移动端App开发方式介绍

1.1、App的开发分类

native App(原生开发：IOS或者Android)
Web App
Hybrid App(混合开发)

2.2、各类App开发方式的介绍

原生应用程序(native App)：原生开发是基于某个移动平台(IOS或者Android)所特有的，是有某个平台特有的开发工具和语言进行开发，原生开发外观和运行(性能)是最高的。
H5应用程序(Web App)：H5应用程序使用的是标准的Web技术，通常是使用HTML、CSS和JavaScript，只编写一次，可跨平台。但存在局限性，无法调用(使用)包括回话管理、安全离线存储以及访问原生开发设备功能(摄像头、日历、地理位置等)。
混合应用程序(Hybrid App)：混合应用程序集结了原生应用程序和H5应用程序的优点于一身。

3.3、各类App开发的优缺点

native App

优点：

提供更好的用户体验、用户界面、交互。
可以访问本地资源
可以调用移动硬件设备，例如摄像头、日历、地理位置等。

缺点：

开发成本高，不适用于编写复杂的页面结构，无法跨平台，每一种移动操作系统都需要一个独立的开发项目，针对不同的操作系统提供不同的用户体验。
开发的审核周期过长，Android可以需要1-3天，IOS则需要更多的时间。
更新新版本过慢，版本更新权限在用户手中，如果用户没有更新最新版本，一直使用老版本，可能需要继续维护老版本。

Web App

优点：

整体量较轻，开发成本低，适合于编写复杂的页面结构。
不需要用户手动更新，由开发者在后台直接更新，并且呈现给用户观看的都是最新的版本。
基于浏览器，可以跨平台使用。

缺点：

无法调用(使用)移动设备功能(摄像头、日历、地理位置等)。
资源都存在于远程的服务器上面，当受制于网速的时候，会影响页面的交互效果，而且不稳定。

Hybrid App

这类App开发集结了原生和Web App开发的各类优势

在应用程序的内部打开Web网页，节省了浏览器的跳转带来的麻烦
融合了原生App和Web App的优点(速度快，可跨平台)
在主要功能相对稳定的前提下，其它的功能使用Web的形式，使得迭代更新更加的方便。

二、ReactNative简介

React Native使你只使用JavaScript也能编写原生移动应用。它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。

ReactNative官网：facebook.github.io/react-nativ…

ReactNative中文官网： reactnative.cn/

三、搭建RN开发环境前的说明

注意：RN开发环境对版本的要求极高，必须严格按照RN开发环境的制定版本来安装，如果版本不一致会导致无法正常运行 各个开发环境搭建遵循的三部曲：

1、安装环境 ===> 2、配置环境变量 ===> 3、检测是否成功安装环境

四、Python环境安装

python下载网址：www.python.org/getit/ 找到对应的版本下载即可

4.1、安装Python 2.x 版本

4.2、配置环境变量(以window10为例)

4.3、检测使用

命令行窗口(Win + R)中输入python,看到以下代码即表示下载成功

五、Java环境安装

Java JDK下载网址: www.oracle.com/technetwork…

5.1、安装Java JDK 1.8版本

5.2、配置环境变量(以window10为例)

5.3、检测使用

命令行窗口(Win + R)输入Java 跟 Javac,如果出现以下代码即代表Java环境安装成功

六、Android环境安装

下载网址：www.androiddevtools.cn

6.1、安装Android Studio 3.14版本

6.2、配置环境变量(以window10为例)

6.3、检测使用

命令行窗口(Win + R)输入adb devices,如果出现以下代码即代表环境安装成功

七、Android 模拟器安装

Genymotion官网地址：www.genymotion.com

7.1、安装Genymotion(建议换一个路径安装，因为这个软件比较大，不建议安装在C盘)

安装完Genymotion之后会继续弹出VirtualBox安装界面，继续下一步

继续下一步即可，无论弹出什么提示框询问是否安装，都点击安装，切记：安装虚拟机不要修改路径，使用默认路径即可
安装完成到最后一步的时候，会出现如下提示框，将勾选的框去掉

若安装完之后，桌面出现如下三个图标，则代表安装成功

7.2、注册 Genymotion账号

注册Genymotion账号网址：www.genymotion.com/account/cre…

自行前往邮箱激活账号即可

7.3、登录Genymotion

7.4、下载手机模拟器

等待安装完成之后，双击启动手机模拟器

若在启动模拟器过程中，出现如下错误

这是cpu的虚拟化被禁用了
需要进入BIOS选项设置启用CPU的虚拟化
重新开机,(启动时，迅速按Del，ESC，F1，F2，F10，进入蓝屏界面)(如何进入BIOS选项，是看电脑品牌而定，每个品牌都不一样)

找到Intel Virtual Technology项, 调整为 Enabled

重启电脑即可
再次双击重启模拟器

成功开启手机模拟器的界面

打开命令行窗口输入 adb devices，出现以下代码即代表和计算机链接的Android设备列表：

八、ReactNative的脚手架安装

下载之前，一定要保证Node的版本是 12.10.0

    nvm ls // 先查看当前计算机上安装的所有Node版本
    nvm install v12.10.0 // 安装Node版本为12.10.0
    nvm use 12.10.0 // 切换Node的版本为12.10.0
    nvm install -g yarn // 安装全局的yarn

yarn的镜像设置

yarn config set registry registry.npm.taobao.org --global

yarn config set disturl npm.taobao.org/dist --global

    ReactNative的项目没办法用来cnpm来安装，所以只能使用facebook团队提供的yarn包管理工具
    yarn global add react-native-cli
    
    检查是否安装成功
    react-native -v
    
    如果 'react-native' 不是内部或者外部命令，则执行以下代码
    npm install -g yarn react-native-cli
    
    重新检查是否安装成功
    react-native -v
    
    出现以下代码则表示安装成功
    react-native-cli: 2.0.1
    react-native: n/a - not inside a React Native project directory

九、创建ReactNative项目

react-native init 项目名 --version 0.55.4 (要求必须加上版本号)

注意：项目名和项目路径不可以有中文

    react-native init rn_demo --version 0.55.4

之后只需要等待下载完成即可

启动项目

这个时候需要启动手机模拟器

    react-native run -android

第一次启动项目需要的时间很长，需要耐心等待
如果出现以下的页面则表示我们的项目已经启动成功了