react-native-static-server

搭建本地静态服务器和使用本地静态资源, 需要在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才不会报错。