是这样的,简而言之,有口大锅,让我背着。

在小学期两周速成 Android App 开发什么的,这合理嘛.

这恒河里.

于是这篇文章就完全是记录性质的,可能最后会根据 咕的情况 && 是否便于整理成学习笔记 这两个因素决定要不要再水一篇指北。

咕咕咕。

8.13

  • 下午 23:00

开会,定App方案。第二天七夕节,大晚上还定方案。离谱(

实践视频改稿,等风扇转到晚上 03:00,终于能入睡,咕咕咕,啥都没干

8.14

  • 凌晨 10:00

装模作样地打开了https://reactnative.dev/.

明明后端更好写吧 为什么要在前端耗着

看了配置说明 感觉好麻烦x

Introduction

什么是 React Native?

React Native是使用 React 来构建 Android 和 iOS 应用的开源社区框架。也就是说,我们使用 Javascript 来实现应用的主要界面和功能。

Views: Just like ReactElement,或是 Web 开发中的一个<div>块,有层级结构

核心组件(Core Components)与本地组件(Native Components)

image-20210814120050939

如何理解?核心组件在两个平台上都能正常显示,本地组件只能显示在特定平台上。

  • 中午 16:40

不行 不能咕咕咕了 干活干活

今天要不把开发环境给配置好 c7w 就是爬爬怪

Setting up the development environment 开发环境配置

这里我们介绍 Development OS=Linux headless(WSL), TargetOS=Android 的环境配置方法。

安装依赖

  • Node (12+)
  • JDK (8+)

首先可以使用 java -version 查看是否已成功安装 java.

查看结果后,如果没有成功安装,我们可以运行 apt install

sudo apt install openjdk-11-jre-headless

然后我们再运行查看版本:

c7w@cc7w  /mnt/e/Project  java -version
openjdk version "11.0.11" 2021-04-20
OpenJDK Runtime Environment (build 11.0.11+9-Ubuntu-0ubuntu2.20.04)
OpenJDK 64-Bit Server VM (build 11.0.11+9-Ubuntu-0ubuntu2.20.04, mixed mode, sharing)
  • Android SDK

什么是 SDK?

A software development kit (SDK) is a collection of software development tools in one installable package. They facilitate the creation of applications by having a compiler, debugger and perhaps a software framework. They are normally specific to a hardware platform and operating system combination. (Excerpted from Wikipedia)

由于我们要开发 Android App,所以显然我们是需要 Android SDK的.

SDK的安装参考了这里.

https://gist.github.com/steveclarke/d988d89e8cdf51a8a5766d69ecb07e7b

创建新应用

新建文件夹,然后运行npx react-native init AwesomeProject. 简单易用.

要想使用 Typescript,我们可以运行npx react-native init AwesomeTSProject --template react-native-template-typescript.

然后我们就能打开喜闻乐见的编辑器.

image-20210814170452919

然后什么都不管先运行了一波 yarn android.

然后项目会帮我们安装 gradle.

然后我们需要设置 在local.propertiessdk.dir=/home/c7w/Android

然后这时再 yarn android 便可以成功. 但由于没有emulation env 我们仍没有完成调试的配置,所以我们直接快进到打包发布

打包发布

https://reactnative.cn/docs/signed-apk-androidhttps://reactnative.cn/docs/signed-apk-android

饿饿 饭饭

  • 下午 19:00

初次配置:设置签名

keytool -genkeypair -v -storetype PKCS12 -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 1000

这条命令会要求你输入密钥库(keystore)和对应密钥的密码,然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件。

在运行上面这条语句之后,密钥库里应该已经生成了一个单独的密钥,有效期为 1000 天。—alias 参数后面的别名是你将来为应用签名时所需要用到的,所以记得记录这个别名。

然后,我们需要配置 gradle 变量.

  1. my-release-key.keystore文件放到工程中的android/app文件夹下。
  2. 编辑项目目录/android/gradle.properties。如果没有gradle.properties文件你就自己创建一个,添加如下的代码(注意把其中的****替换为相应密码)
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

生成 APK

What is APK?

Android Package (APK) is the Android application package file format used by the Android operating system, and a number of other Android-based operating systems for distribution and installation of mobile apps, mobile games and middleware.

(Excerpted from Wikipedia)

只需在终端中运行以下命令:

cd android
./gradlew assembleRelease

生成的 APK 文件位于android/app/build/outputs/apk/release/app-release.apk,它已经可以用来发布了。

启用 Proguard 来减少 apk 的大小

Proguard 是一个 Java 字节码混淆压缩工具,它可以移除掉 React Native Java(和它的依赖库中)中没有被使用到的部分,最终有效的减少 APK 的大小。

要启用 Proguard,修改android/app/build.gradle文件:

/** 
* Run Proguard to shrink the Java bytecode in release builds. */
def enableProguardInReleaseBuilds = true

碎碎念

Dev on Windows with WSL

在 Windows 上用 WSL 优雅开发

https://dowww.spencerwoo.com/ 看了这个Doc网站

感觉对USB调试有效.

是时候该升级成wsl2了.

https://xwsoul.com/posts/199

感觉似乎可行.

总比每次先build然后传到手机上调试好吧.

这就干.

准备水另一篇文章.

8.15

Android Debugging

ADB 的使用

What is ADB?

Android Debug Bridge (adb) is a versatile command-line tool that lets you communicate with a device. (Excerpted from developer.android.com)

在 Windows 上下载:https://developer.android.com/studio/releases/platform-tools

下载好直接就能用.

使用方法:

  • 在 Windows 上先 adb devices 查看可用设备列表,确保配置好 USB 调试.
  • 在 Windows 上使用 adb tcpip <port> 为设备开启 tcpip 端口.
  • 在 WSL 上使用 abd connect <Device IP>:<port> 连接该端口.
c7w@cc7w  ~/Android/platform-tools  ./adb devices
List of devices attached
183.172.***.***:5556    device

配置完成.

但是死活连接不上去,目测是辣鸡 Tsinghua-Secure 会吃掉连接.

从中厅把路由器拿来装好. Peking-Secure 也不行.

在 Windows 和 WSL 之间的通信总是会出问题.

需要把 WSL 的 IP 也纳入到 Peking-Secure 下才行,但是解决不了.

大恼,决定把整个开发环境从 WSL 里面搬出来,换成 Windows.

  • 下午 20:00

整个 Windows 的环境配置完成了. 也成功在 Debug 专用板砖上输出了 Hello React Native.

  • 下午 23:00

画了一个简单的登录界面. 睡大觉.

8.16

  • 半夜 8:00

舍友早九 不得已被迫起床,开始干活.

先从方舟挂机开始(大嘘

image-20210816093146543

安装 React-Native-Navigator 之后没有yarn android ,狂按R按了半小时,还搁那搜索为什么报错.

安装依赖后一定要重新 Build 一遍发到手机上再开 Debugger.

https://reactnavigation.org/docs/navigating

8.21 & 8.22

画前端。装了什么 icons navigator 之类的包。还在研究怎么用。

8.23

做跳转。打算先从 redux 的教程写起。

8.24

后端 deploy 好了。这下大鱼摸不成了。

写前端。把请求加进去.

被队友痛击.

前端 狗都不写.

逻辑十分不清晰. 感觉需要重构.

但是就这么一个破 App 似乎没有重构的必要.

TO BE CONTINUED