react native(三端通用)

简介

React Native 是Facebook 在React.js Conf 2015 上推出了开源的框架
1.React Native(简称 RN)是React 的一个原生(Native)扩展
2.它允许我们通过React语法,来开发iOS和Android原生应用

官网

http://reactnative.dev/

常用混合开发框架

RN的优势和不足

优势

1. 开发体验好
用同一的代码规范开发移动端程序,不用关注移动端的差异
2. 开发成本低
开发一次,可以生成Android和iOS两个系统上的App
3.学习成本低
只要掌握JS和React,就可以进行移动端开发了

不足

// 不成熟
项目更新维护较频繁,学习成本高
// 性能差
整体性能仍不如原生开发
// 兼容性查
涉及底层的功能,需要针对Android和iOS双端单独开发

基础环境搭建

node.js

版本>=12(推荐安装LTS版本)

// 配置国内镜像
npm config set registry https://registry.npm.taobao.org
// 切换至淘宝
npx nrm use te taobao
// 切换回官方
npx nrm use npm

Yarn工具

加速node包的下载速度

npm install -g yarn

安装React Native脚手架

yarn install -g react-native-cli

app开发环境搭建

# windows下只能搭建Android开发环境
# Mac下既能搭建Android开发环境,又能搭建windows的开发环境

Android环境搭建

安装python2

安装JDK1.8

必须是1.8版本
官网

# 需要先注册Oracle账号
https://www.oracle.com/java/technologies/downloads/#java8

# 验证是否安装成功
java -version

安装Android Studio 需FQ

官网

http://developer.android.com/studio/index.html

# 记得勾选模拟器的选项

安装Android SDK

方式一

点击Configure,然后就可以看到"SDK Manager"

SDK Manager还可以再Android Studio 的Preferences菜单中找到,具体路径是Appearance & Behavior --> System Settings --> Android SDK

在SDK Manager中选择"SDK Platforms"选项卡,然后再右下角勾选"Show Package Details",展开Android 9 (pie)选项,确保勾选了下面这些组件(必须使用稳定的FQ工具,否则可能看不到这个页面):
1.Android SDK Platform 28
2.Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)
然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details",展开"Android SDK Build-Tools"选项,确保选中了React Native所必须得28.0.3版本,你可以同时安装多个版本.
最后点击"Apply"来下载和安装这些组件

配置ANDROID_HOME环境变量

React Native 需要通过环境变量来了解Android SDK壮哉什么路径,从而正常进行编译
SDK默认安装路径是

# Appearance & Behavior --> System Settings --> Android SDK,可以查看SDK安装路径
c:\Users\用户名\AppData\Local\Andriod\Sdk

方式二

在编辑器的tools --> SDK Manager


查看Android SDK 安装位置
tools --> SDK Manager
Appearance & Behavior --> System Settings --> Android SDK

Android Home 环境变量

工具目录环境变量添加到Path

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

创建新项目

命令行

npx react-native init 项目名

编译并运行React Native应用

yarn android
或者
yarn react-native run-android