Lazy loaded image
Web
🎰React Native 从0到1
字数 1143阅读时长≈ 3 分钟
2023-7-28
2023-7-28
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 平台的（没有苹果👀）

完成原生搭建

搭建开发环境 · React Native 中文网
欢迎使用 React Native！这篇文档会帮助你搭建基本的 React Native 开发环境。
搭建开发环境 · React Native 中文网
https://www.reactnative.cn/docs/environment-setup
搭建开发环境 · React Native 中文网

软件依赖

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.
Node.js
https://nodejs.org/en
Node.js
JDK
Download the Latest Java LTS Free
Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.
Download the Latest Java LTS Free
https://www.oracle.com/java/technologies/downloads/#java11
Download the Latest Java LTS Free
Android Studio
Download Android Studio & App Tools - Android Developers
Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.
Download Android Studio & App Tools - Android Developers
https://developer.android.google.cn/studio/
Download Android Studio & App Tools - Android Developers
注意安装时选择下面几项
  • 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
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
Expo
https://expo.dev/expo-go
Expo
用于连接项目环境，可以理解为一个原生的模拟器环境，无论在手机上或者模拟器都能使用
项目运行后，你会看到如下图片
notion image
你可以通过软件扫描二维码或者输入连接来连接

使用

以下内容是基于 Expo 搭建的
这部分内容就和使用React大差不差，也可以去看看官网教程的使用
简介 · React Native 中文网
欢迎开启 React Native 的旅程！如果你在找如何搭建环境的文档，请移步搭建开发环境。 继续往下阅读可了解关于文档结构、原生组件、React等相关的一些介绍。
简介 · React Native 中文网
https://www.reactnative.cn/docs/getting-started
简介 · React Native 中文网
 
这边推荐一个Demo
使用到了Navigation、Swiper，非常华丽还简单
GitHub - syednomishah/Onboarding-UI-React-Native: onboarding UI with Lottie Animations
onboarding UI with Lottie Animations. Contribute to syednomishah/Onboarding-UI-React-Native development by creating an account on GitHub.
GitHub - syednomishah/Onboarding-UI-React-Native: onboarding UI with Lottie Animations
https://github.com/syednomishah/Onboarding-UI-React-Native/tree/main
GitHub - syednomishah/Onboarding-UI-React-Native: onboarding UI with Lottie Animations
notion image
 

打包

构建项目

1. 注册 Expo

Expo
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
Expo
https://expo.dev/
Expo
注册它的用途是：与我们的项目进行连接，expo打包会将项目构建然后上传
你可以看看package.json中，并没用打包相关的
 
创建一个新项目，后续用于同步本地项目
notion image
记住这个界面下面要用
notion image

2. 安装EAS

通过eas来进行expo的登录
通过eas将远程和本地进行连接
这用到了上面的

3. build

选择你要打包的平台
 
最后通过下面指令查看进度
你也可以去Expo中创建的项目查看构建进度
notion image
这边可以需要的较长的事件
到这里，项目就上传到云端了

构建APK

1. 下载aab

等安装完成后，你会看到下载按钮
notion image
注意：这边目前是aab文件，如果不了解，自行百度
先下载下来

2. 获取签名

在Expo左侧的Credentials中，选择对应的Application Identifiers
接下来，下载这个文件，这个压缩包里有一个密钥文件和一个密码md，后面会用到

3. 下载 bundletool

用于将aab文件转为apk
下载bundletool.jar

4. 生成 apks 文件

执行完后会生成一个apks文件

5. 获取 apk 文件

将apks文件后缀名改为zip，并进行解压缩
然后里面就会有一个apk文件
 
到这里，就大功告成了🎉🎉🎉
 

参考链接

  1. How to Generate and Extract APK Files from Android App Bundle (AAB) (geekdashboard.com)
  1. 搭建开发环境 · React Native 中文网
  1. Create your first build - Expo Documentation
 
上一篇
ThreeJS — 入门
下一篇
Electron 从0到1
评论
Loading...
目录