React Native(1)

搭建开发环境

参考: https://reactnative.cn/docs/environment-setup

安装node的LTS版本: https://nodejs.org/en/download

添加 C:\nodejs\ 到系统path

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名.

npm install -g yarn

安装jdk17: https://github.com/adoptium/temurin17-binaries/releases/

添加如下路径到系统path: C:\jdk-17.0.9+9\bin

javac --version
javac 17.0.9

安装 Android Studio(可能需要代理), 按默认路径安装(如果安装其他路径,可能会碰到一些设置问题): C:\Program Files\Android\Android Studio

https://developer.android.com/studio?hl=zh-cn

安装界面中选择"Custom"选项,确保选中了以下几项:

    Android SDK
    Android SDK Platform
    Android Virtual Device

Android SDK版本 36

配置 ANDROID_HOME 环境变量: C:\Users\Y\AppData\Local\Android\Sdk

系统path变量增加: C:\Users\Y\AppData\Local\Android\Sdk\platform-tools

创建项目:

d:
cd /
npx @react-native-community/cli init ReactNativeTestProject

输出:

√ Downloading template
√ Copying template
√ Processing template
√ Installing dependencies


  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "D:\ReactNativeTestProject" && npx react-native run-android

  Run instructions for Windows:
    • See https://microsoft.github.io/react-native-windows for the latest up-to-date instructions.

连接手机(开启usb调试,仅充电),需要授权, 参考: https://reactnative.cn/docs/running-on-device

cd ReactNativeTestProject
adb devices
List of devices attached
10CFBD1TXxxxxxx unauthorized


adb devices
List of devices attached
10CFBD1TXxxxxxx device

第一次运行测试可能需要用代理安装缺失组件:

cd ReactNativeTestProject
yarn add react-native-cli
npx react-native run-android

gradle下载问题:

编辑 D:\ReactNativeTestProject\android\gradle\wrapper\gradle-wrapper.properties 文件

distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip

替换为

distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-9.0.0-bin.zip

安装 IntelliJ IDEA

安装插件:

    进入IntelliJ IDEA的插件市场,搜索并安装以下插件:
        React Native
        JavaScript
        Node.js

配置运行环境:

    在IntelliJ IDEA中,点击“Run”菜单,选择“Edit Configurations”。
    添加一个新的“Node.js”配置,设置“JavaScript file”为项目目录下的index.js。
    在“Application parameters”中添加android,以便启动安卓模拟器。

打包

参考: https://reactnative.cn/docs/signed-apk-android

d:
cd D:\ReactNativeTestProject\
C:\jdk-17.0.9+9\bin\keytool.exe --genkeypair --v --storetype PKCS12 --keystore my-release-key.keystore --alias my-key-alias --keyalg RSA --keysize 2048 --validity 10000
输入密钥库口令:mishikukouling
再次输入新口令:mishikukouling
您的名字与姓氏是什么?
  [Unknown]:  Ming Xing
您的组织单位名称是什么?
  [Unknown]:  ORG Name
您的组织名称是什么?
  [Unknown]:  ORG Name
您所在的城市或区域名称是什么?
  [Unknown]:  City
您所在的省/市/自治区名称是什么?
  [Unknown]:  Province
该单位的双字母国家/地区代码是什么?
  [CN]:  CN
CN=Ming Xing, OU=ORG Name, O=ORG Name, L=City, ST=Province, C=CN是否正确?
  [否]:  Y

正在为以下对象生成 2,048 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 10,000 天):
         CN=Ming Xing, OU=ORG Name, O=ORG Name, L=City, ST=Province, C=CN
[正在存储my-release-key.keystore]

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

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

注意:请记得妥善地保管好你的密钥库文件,一般不要上传到版本库或者其它的地方。

  • 把my-release-key.keystore文件放到你工程中的android/app文件夹下。
  • 编辑项目目录/android/gradle.properties(项目配置,只对所在项目有效),添加如下的代码(注意把其中的****替换为相应密码)
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=mishikukouling
MYAPP_RELEASE_KEY_PASSWORD=mishikukouling
  • 编辑你项目目录下的android/app/build.gradle
...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file("D:/ReactNativeTestProject/android/app/my-release-key.keystore") // 确保路径正确 
            storePassword "mishikukouling"
            keyAlias "my-key-alias"
            keyPassword "ymishikukouling"
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

生成发行 APK 包:只需在终端中运行以下命令

cd android
gradlew assembleRelease

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

默认apk大小46M+,安装后48M+。

启用 Proguard 来减少 apk 的大小(可选):修改android/app/build.gradle文件

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

apk 大小 43M+,安装后约 46M,没减少多少啊…

正文完
 0
评论(没有评论)