一、关于React Native
1. 什么是React Native?
React Native(RN)是facebook开源的一套用于开发移动端跨平台App的技术框架。RN用于开发原生App可以解决基于Web开发的应用所面对的性能和权限问题。而React与RN之间,RN的开发过程不需要编写div和span标签,而要使用视图以及文本组件,以及有权限调用原生工具,
它与Cordova类似,但是,Cordova是运行在webview中,通过调用原生API获得原生级别的功能,而RN组件会被 直接渲染成原生部件,可以为移动应用提供真正的原生体验,而Cordova应用在遇到滚动这样的高强度的UI交互场景时,可能 会发生崩溃。
2. 相较于原生开的,React Native开发的优势?
传统开发痛点:
- 人员稀缺,一个app针对 不同平台需要分端开发
- 开发成本高,需要android 和IOS两个团队,对于小团队不友好
- 代码复用率低:不同端代码不通用
- 无法动态更新,每次更新都需要向应用市场分别上传新的包,还要担心审核被拒等问题
React Native的优点:
- 跨平台、低投入高回报、性能高(比H5+WebView的方式高很多)、支持动态更新。
- 一才两用,开发成本低(只需要一端),代码复用率高,
二、环境搭建
在React Native官网可以看到有两套脚手架工具:expo-cli
(沙箱环境)和react-native-cli
(完整环境),expo对网络环境的要求比较高,很多依赖出自国外,不建议国内用户使用。
- 安装教程,官网说得很明白:安装依赖
2.1 安装依赖
- 注意事项:
- Node版本必须 >= 10,Python版本必须 为2.x(不支持3.x),而JDK必须 是
1.8
- Node版本必须 >= 10,Python版本必须 为2.x(不支持3.x),而JDK必须 是
# 使用chocolate快速安装
choco install -y nodejs.install python2 jdk8
- chocolate是基于windows平台的包管理工具(就像一个软件管理应用)
1. Node安装
对于Node的安装建议直接到官网下载安装包来安装,也可以使用chocolate来安装。官网
2. Python 2.x
官网下载地址,注意选择2.x版本(即2.7.8)
3. jdk8
2.2 Android开发环境
1. 安装Android Studio
首先下载和安装 Android Studio,国内用户可能无法打开官方链接,可以通过google提供的开发者网站下载。安装界面中选择"Custom"选项,确保选中了以下几项:
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM) (AMD 处理器看这里)
- Android Virtual Device
2. 安装Android SDK
Android Studio 默认会安装最新版本的 Android SDK。而编译RN应用需要android 9,所以需要在安装后,通过Android Studio 的
SDK Manager
中选择安装各版本的 SDK。
你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"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"来下载和安装这些组件。
3. 配置 ANDROID_HOME 环境变量
打开
控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建
,创建一个名为ANDROID_HOME
的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录
4. 把 platform-tools 目录添加到环境变量 Path 中
编辑Path环境变量,新增指向 Sdk\platform-tools的地址
三、初始化一个新项目
npx react-native init myApp
通过react-native-cli创建myApp后可以看到,其生成如下目录:
__test__
:为项目应用的用例测试文件android
:为编译后的android应用ios
:为编译后的ios文件node_modules
:项目依赖其它如App.js
:即我们要修改的应用文件
四、使用Android Studio跑起来
在这里,你可以使用真机也可以直接使用Android Studio自带的模拟器来运行运用,这里以模拟器为准。
File--> Open-->选择myApp下的android目录
此时,IDE会识别并进行一系列编译,等待一会儿后,可以点击运行试试。
注意:对于第一次使用的我来说,这里遇到个问题:
Cannot find AVD system path. Please define ANDROID_SDK_ROOT
, 原因是Android Studio自带的模拟器镜相并未安装,所以先把它delete,再通过Tools--> AVD Manager-->Create Virtual Device
来新增设备,这里选择的是Nexus5,一路Next并安装成功后Finished,
- 启动模拟器
- 待启动完成后,运行App
注意2:在首次运行时,可能出现红屏报错如下:
此时需要先npx react-native run-android
进行项目编译
注意3:由于新版本的React Native 初始代码中加入了部分TS写法,而环境中没有对TS的支持的话,会在模拟器中报错,Syntax Error.... no stack
,这里需要对myApp/App.js进行修改,先把应用跑起来
- 修改后,再次运行基本就没什么问题了,在这里第一个应用就算成功跑起来了,可以通过对App.js进行修改后,看看应用的变化