使用 Jetpack Compose 的 Android WebView 无法正确渲染 Mantine UI (React) 组件

Question

描述

我使用 Mantine UI 框架开发了一个 React 网站，它可以在各种浏览器和设备上无缝运行。现在，我尝试使用 Jetpack Compose 创建一个显示网站 WebView 的 Android 应用程序。但是，我遇到了一个问题，即某些 Mantine UI 组件（例如模态框和侧边栏）无法在 Android Webview 中正确呈现，但可以在常规 Android 浏览器（如 Chrome）中工作。

问题描述：

模态背景按预期模糊，但模态本身及其所有内容不会出现。 此问题是 Android 特有的；该网站在常规浏览器和 iOS 上都能正常运行。 Webview权限已授予，包括允许JavaScript，但问题仍然存在。

这是我用来显示 WebView 的代码：

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context ->
        WebView(context).apply {
             setupWebView(this)
             loadUrl("https://v6.mantine.dev/core/modal/")
        }
    }
)

尝试和观察：

我尝试了各种不同的方法将内置 Webview 实现到我的应用程序中，看看是否可以解决问题，但没有任何效果。我还确保 Webview 没有缺少任何阻止其工作的权限。

我探索了替代 WebView 选项并测试了 Mozilla 的 Geckoview，它可以正确呈现 Mantine UI 组件。然而，由于 Gradle 构建配置差异，我正在努力将 Geckoview 集成到我的项目中。

我使用本指南尝试实现它，但失败了：

https://firefox-source-docs.mozilla.org/mobile/android/geckoview/consumer/geckoview-quick-start.html

我的 Gradle 构建配置：

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
}

android {
    namespace = "com.myapp"
    compileSdk = 34

    defaultConfig {
        applicationId = "com.myapp"
        minSdk = 24
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary = true
        }
    }

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"
    }
    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }
}

dependencies {

    implementation("androidx.core:core-ktx:1.12.0")
    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
    implementation("androidx.activity:activity-compose:1.8.1")
    implementation(platform("androidx.compose:compose-bom:2023.08.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.compose.material3:material3")

    implementation("com.squareup.retrofit2:retrofit:2.9.0")
    implementation("com.squareup.retrofit2:converter-gson:2.9.0")
    implementation("com.squareup.okhttp3:logging-interceptor:4.9.0")

    implementation("androidx.compose.material:material-icons-extended:1.5.4")

    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.5")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
    androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00"))
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-tooling")
    debugImplementation("androidx.compose.ui:ui-test-manifest")
}

问题：

1. 有人遇到过 Mantine UI 组件无法使用 Jetpack Compose 在 Android WebView 中正确渲染的挑战吗？
2. 有人可以提供有关将 Mozilla 的 Geckoview 或其他 WebView 库无缝集成到 Jetpack Compose 项目中的指导吗？或者，我们将非常感谢有关解决默认 WebView 问题以确保功能正常的建议。请考虑我当前的 Kotlin Gradle 构建配置。

我感谢任何有助于解决此问题的见解、解决方法或示例。谢谢！

Answer 1

当我检查你的问题时。您缺少导致错误的一行

settings.javaScriptEnabled = true

。因为默认它是 false 所以

JavaScript

将不起作用，React 也是

JavaScript

的一部分。

我已经在模拟器中检查了下面的示例，它可以工作并打开包含内容的模型对话框。

import android.graphics.Bitmap
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.compose.BackHandler
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView

@Composable
fun WebViewDemoScree() {
    var backEnabled by remember { mutableStateOf(false) }
    var webView: WebView? = null
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            WebView(context).apply {
                webViewClient = object : WebViewClient() {
                    override fun onPageStarted(view: WebView, url: String?, favicon: Bitmap?) {
                        backEnabled = view.canGoBack()
                    }
                }
                settings.javaScriptEnabled = true

                loadUrl("https://v6.mantine.dev/core/modal/")
                webView = this
            }
        }, update = {
            webView = it
        })

    BackHandler(enabled = backEnabled) {
        webView?.goBack()
    }
}