rn环境安装笔记

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

1.1、app的分类(按开发方式)

大致可以分为这3种：

• native app（原生app）
• web app
• hybrid app（混合app）

1.2、各类开发方式的APP介绍

原生应用程序（NativeAPP）

原生(Native)应用程序是某一个移动平台（比如iOS或安卓）所特有的，使用相应平台支持的开发工具和语言（比如iOS平台支持Xcode和Objective-C,Swift，安卓平台支持Eclipse和Java）。原生应用程序外观和运行起来（性能）是最佳的。

H5应用程序（H5APP/WEBAPP）

HTML5应用程序使用标准的Web技术，通常是HTML5、JavaScript和CSS。这种只编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可以在多个设备上运行。虽然开发人员单单使用HTML5和JavaScript就能构建功能复杂的应用程序，但截至本文截稿时仍然存在一些重大的局限性，具体包括会话管理、安全离线存储以及访问原生设备功能（摄像头、日历和地理位置等）。

混合应用程序（HybridAPP）

混合(Hybrid)应用程序让开发人员可以把HTML5应用程序嵌入到一个细薄的原生容器里面，集原生应用程序和HTML5应用程序的优点（及缺点）于一体。

1.3、各类app的优缺点

native app
优点：

• 提供最佳用户体验，最优质的用户界面，流畅的交互
• 可以访问本地资源
• 可以调用移动硬件设备，比如摄像头、麦克风等

缺点：

• 开发成本高。每种移动操作系统都需要独立的开发项目，针对不同平台提供不同体验；
• 发布新版本慢。下载是用户控制的，很多用户不愿意下载更新（比如说，版本发布到了3.0，但还是有很多1.0的用户，你可能就得继续维护1.0版本的API）
• 应用商店发布审核周期长。安卓平台大概要1~3天，而iOS平台需要的时间更长

web app
优点：

• 整体量级轻，开发成本低
• 不需要用户进行手动更新，由应用开发者直接在后台更新，推送到用户面前的都是全新版本，更便于业务的开展
• 基于浏览器，可以跨平台使用

缺点：

• 资源的都在远程服务器。在网速受到限制时，交互效果也会受到限制。页面跳转费力，不稳定感更强。
• 无法操作很多手机原生设备，摄像头，麦克风，不支持多点触控等。

Hybrid app
这类app集合了上面两种app各自的优势：

• 在实现更多功能的前提下，使得app安装包不至于过大

• 在应用内部打开web网页，省去了跳转浏览器的麻烦

• 主要功能区相对稳定下，部分功能区采用web 形式，使得迭代更加方便

• 融合了原生APP和WebApp优点（速度快，跨平台）

二、ReactNative简介

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

React Native最终产品很贴近移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。 所以有React基础，那么学习 RN会非常轻松。

ReactNative官网：http://facebook.github.io/react-native

ReactNative中文官网： https://reactnative.cn/

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

注意：RN开发环境对版本要求极高，所有环境严格按照指定版本来安装，版本不一致会导致无法正常运行

各个环境的搭建遵循的三部曲：

1、安装环境 ====> 2、配置环境变量 ====> 3、检测使用

四、Python环境安装

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

4.1、安装python 2.x版本

安装路径不用更改，记录下来：

C:\Python27\

(然后一直Next…，直到安装结束)

4.2、配置环境变量

桌面”此电脑“右键，点击”属性“，点击右侧高级系统设置

新建环境变量PYTHON_HOME

4.3、检测使用

命令行窗口中键入python，看到以下 Python2.7.XX 字样则表示安装成功

五、Java环境安装

Java JDK下载网址: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

5.1、安装Java1.8版本

这里不建议更改安装路径，记录下这个环境路径：C:\Program Files\Java\jdk1.8.0_151\

继续安装jre ， 注意：jdk和jre安装在同一目录下

5.2、配置环境变量

新建环境变量JAVA_HOME

5.3、检测使用

关闭刚才的命令行窗口，重新打开命令行窗口

命令行窗口中键入java

命令行窗口中键入javac

键入java和javac，看见以上表示安装成功

六、Android环境安装

下载网址：http://www.androiddevtools.cn

6.1、安装Android Studio 3.14版本

拷贝SDK（Android运行环境）到Android目录下，解压

6.2、配置环境变量

新建环境变量 ANDROID_HOME

Path环境：%ANDROID_HOME%\platform-tools

6.3、检测使用

命令行窗口中键入 adb devices

命令能成功执行，安装成功

七、Android模拟器安装

7.1、Genymotion软件和依赖的vbox虚拟器环境

Genymotion官网地址：https://www.genymotion.com

安装Genymotion

建议换个路径，不在装在C盘(建议在刚才的Android目录下)，安装成功后弹出安装虚拟机盒子：

继续下一步默认选项即可(虚拟机不要更改安装路径，并且路径不能有中文)

安装完成后有个安装后引导，取消这个勾即可

安装成功后会多出3个图标：

7.2、注册Genymotion账号

注册Genymotion账号网址：https://www.genymotion.com/account/create/

注册成功后自己保存好账号密码！！！！后面要用！

7.3、使用Genymotion

双击图标

点击登录：

键入用户名密码后点击登录：

点击Sign in登录后会继续弹出：

点击Personal Use 个人使用：

弹出同意协议页面：

勾上，点击Accept

看见以上界面表示登录成功

7.4、下载手机模拟器

再点击Next即可自动下载手机模拟器了

下载完成后：

7.5、检测模拟器or真机是否连接成功

命令行窗口 输入adb devices 检测和计算机连接的Android设备列表：

八、ReactNative脚手架的创建

操作前先！确保Node是v12.10.0版本 (nvm use v12.10.0)

如果未安装12.10.0版本：
nvm install v12.10.0
npm install -g yarn
nvm use v12.10.0

Yarn设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global

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

reactnative的项目无法使用cnpm安装依赖。所以，需要使用facebook团队提供的yarn包管理工具：
	Yarn global add react-native-cli   

	检测是否安装成功：
	F:\RN>react-native -v
	'react-native' 不是内部或外部命令，也不是可运行的程序或批处理文件。

	如果不成功， 使用下面的命令安装脚手架：
	npm install -g yarn react-native-cli
	
	重新检测是否安装成功：
	F:\RN>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

等待下载完毕即可…

启动手机模拟器(或者连入手机，手机必须是调试模式/开发者模式）
在终端执行adb devices （只要有一个设备即可）

F:\RN>adb devices
List of devices attached
xxxxxxxxxxx        device

启动项目：

进入到项目目录下：执行 react-native run-android 命令 启动项目

再次强调项目目录不要出现中文！！！！！！

第一次启动项目会很慢，耐心等待… …

看到以上界面说明项目启动成功

–version 0.55.4

等待下载完毕即可…

启动手机模拟器(或者连入手机，手机必须是调试模式/开发者模式）
在终端执行adb devices （只要有一个设备即可）

F:\RN>adb devices
List of devices attached
xxxxxxxxxxx        device

启动项目：

进入到项目目录下：执行 react-native run-android 命令 启动项目

再次强调项目目录不要出现中文！！！！！！

第一次启动项目会很慢，耐心等待… …

看到以上界面说明项目启动成功