webview 中文文档 下载 App

Flutter / React Native 里的 WebView:它们底层怎么调 Android WebView

Flutter:webview_flutter

Flutter 官方的 webview_flutter 插件:

Flutter 版本webview_flutter 版本Android 最低要求
3.x4.xAndroid 5.0+ (API 21)
3.x5.xAndroid 7.0+ (API 24)

底层实现:直接创建 android.webkit.WebView 实例,通过 Platform Channel 桥接。

Flutter 层的 WebViewController 最终映射到 Android 层的 android.webkit.WebView API:

// Flutter
WebViewController c = WebViewController();
c.loadRequest(Uri.parse("https://example.com"));

// 对应 Android
WebView webView = new WebView(activity);
webView.loadUrl("https://example.com");

React Native:react-native-webview

React Native 生态的主流选择:

RN 的 WebView 组件直接继承 ReactViewGroup,内嵌一个 android.webkit.WebView 实例。

跨平台框架的共性问题

1. 版本碎片化更严重

Flutter / RN 的 WebView 插件为了兼容跨平台,通常只用 Android 原生 WebView 的基础 API(android.webkit),不引入 Jetpack Webkit。这意味着:

2. 权限请求的双重回调

跨平台框架里,权限请求通常经过三层回调:

网页 JS 调 getUserMedia
    ↓
Android WebView.onPermissionRequest(原生层)
    ↓
Flutter/RN Platform Channel 传过去
    ↓
Flutter/RN 应用层决定 grant / deny
    ↓
再原路返回

如果中间一层没处理,权限就被静默拒绝了——很多 Flutter App 内嵌网页用不了相机就是这个原因。

3. 生命周期管理

Flutter Widget 的 dispose / React Native 组件的 unmount 都需要显式调 Android 层的 webView.destroy(),否则会有内存泄漏——跨平台框架不会替你做。

4. 华为 ArkWeb 兼容

HarmonyOS NEXT 上 Flutter / RN 的 WebView 组件表现如何,取决于华为的兼容性层做得怎么样。理论上 Flutter / RN 都应该工作,但 Chromium 特有 API 在 ArkWeb 上可能不可用。

推荐做法

跨平台项目中如果对 WebView 有较高要求(复杂 JS 交互、权限处理、深色模式):

  1. Android 层改用 Jetpack Webkit(通过 Platform Channel 桥接,Flutter/RN 调用原生方法)
  2. iOS 层统一用 WKWebView(iOS 没有 Chromium WebView,只有 WKWebView)
  3. Web 层统一写 兼容 Chromium 和 WKWebView 的 JS 代码

→ 返回 Jetpack Webkit 总览