type
status
date
slug
summary
tags
category
icon
password
Edited
Jul 28, 2023 02:45 PM
Created
Jul 28, 2023 01:58 PM
简介
使用 React 来创建 Android 和 iOS 的原生应用
React Native 将原生开发的最佳部分与 React 相结合， 致力于成为构建用户界面的顶尖 JavaScript 框架。酌量添加，多少随意。随时都可以把 React Native 无缝集成到你已有的 Android 或 iOS 项目，当然也可以完全从头焕然一新地重写。
流水的多平台，铁打的 React。绝大多数情况下，使用 React Native 的团队可以在多个平台间共享一份基础代码，以及通用的技术 —— React。
环境搭建
这里只说 Android 平台的（没有苹果👀）
完成原生搭建
软件依赖
Node ≥ 16, JDK ≥ 11，Android SDK ≥ 33.0.0
Node
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
https://nodejs.org/en
JDK
Android Studio
注意安装时选择下面几项
Android SDK
Android SDK Platform
Android Virtual Device
Android SDK
通过 Android Studio 的 SDK Manager 来添加
Android SDK Platform 33
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的
33.0.0版本。你可以同时安装多个其他版本。配置 Android 的环境变量
ANDROID_HOME — C:\Users\你的用户名\AppData\Local\Android\Sdk
Path —
创建新项目
最后通过下面指令创建新项目
检测环境是否缺少
在项目内使用下面命令查看
简易沙盒环境
由于完整原生环境太过复杂，难以完全安装好
沙盒环境大量依赖于国外网络环境，但搭建非常简单
Expo
这就可以了
Expo Go 软件的安装
Expo Go的话可以自行去网上下载，或者Google Play下载
用于连接项目环境，可以理解为一个原生的模拟器环境，无论在手机上或者模拟器都能使用
项目运行后，你会看到如下图片
你可以通过软件扫描二维码或者输入连接来连接
使用
以下内容是基于 Expo 搭建的
这部分内容就和使用React大差不差，也可以去看看官网教程的使用
这边推荐一个Demo
使用到了Navigation、Swiper，非常华丽还简单
打包
构建项目
1. 注册 Expo
注册它的用途是：与我们的项目进行连接，expo打包会将项目构建然后上传
你可以看看package.json中，并没用打包相关的
创建一个新项目，后续用于同步本地项目
记住这个界面下面要用
2. 安装EAS
通过eas来进行expo的登录
通过eas将远程和本地进行连接
这用到了上面的
3. build
选择你要打包的平台
最后通过下面指令查看进度
你也可以去Expo中创建的项目查看构建进度
这边可以需要的较长的事件
到这里，项目就上传到云端了
构建APK
1. 下载aab
等安装完成后，你会看到下载按钮
注意：这边目前是aab文件，如果不了解，自行百度
先下载下来
2. 获取签名
在Expo左侧的
Credentials中，选择对应的Application Identifiers接下来，下载这个文件，这个压缩包里有一个密钥文件和一个密码md，后面会用到
3. 下载 bundletool
用于将aab文件转为apk
下载
bundletool.jar4. 生成 apks 文件
执行完后会生成一个
apks文件5. 获取 apk 文件
将
apks文件后缀名改为zip，并进行解压缩然后里面就会有一个apk文件
到这里，就大功告成了🎉🎉🎉
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/reactnative-intro
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。