搭建本地静态服务器和使用本地静态资源, 需要在expo弹出的裸漏工作流中
Step1. 配置android文件
/android/app/build.gradle
中添加 sourceSets { main { assets.srcDirs = ['src/main/assets','../../assets']}}
android {
compileSdkVersion rootProject.ext.compileSdkVersion
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
defaultConfig {
applicationId 'com.fengmo.GA08'
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0.0"
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
}
}
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
}
buildTypes {
debug {
signingConfig signingConfigs.debug
}
release {
// Caution! In production, you need to generate your own keystore file.
// see https://reactnative.dev/docs/signed-apk-android.
signingConfig signingConfigs.debug
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// https://developer.android.com/studio/build/configure-apk-splits.html
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
+ sourceSets { main { assets.srcDirs = ['src/main/assets','../../assets']}}
}
Step2. 安装静态服务器
yarn add react-native-static-server
Step3. 安装文件系统
yarn add react-native-fs
Step4. 安装html渲染组件
expo install react-native-webview
Step5. 项目根目录中新建type.d.ts
declare module 'react-native-static-server'
declare module 'react-native-fs'
Step6. assets/www
中放置静态html项目文件
Step7. 启动本地开发服务器
yarn start
Step8. 将开发apk打包到模拟器测试成果
yarn android
Step9. 如果打包后的apk打开页面不显示
Domain: undefine
Error Code:-1
需要在 android/app/src/main/AndroidManifest.xml
中的<application>
中添加 android:usesCleartextTraffic="true"
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
+ android:usesCleartextTraffic="true"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="true"
android:theme="@style/AppTheme"
>
以上只是流程步骤,具体逻辑代码未在这里展示
注意
修改静态文件后,如果yarn android
报错
Unable to delete directory
需要先删除本地 android\app\build\intermediates\merged_assets\debug\out\
中的文件,再yarn android
才不会报错。