在 Android 上开发 webview 内容的建议？答案

【问题标题】：Recommendations for developing webview content on Android?在 Android 上开发 webview 内容的建议？
【发布时间】：2021-01-11 18:47:47
【问题描述】：

我有一个加载一些 html 和 javascript 的 webview 组件。 html + javascript 相当大，使用 webpack 编译成一个页面（html、javascript 和 css 都在一个文档中）。我无法找到一种相当有效的方法来开发我的网络内容，我可以参考一些建议。

我的 webview 是这样加载的：

      <WebView
        ref={inputRef}
        source={
          Platform.OS === 'ios'
            ? require('../../assets/dist/index.html')
            : { uri: 'file:///android_asset/index.html' }
        }

        style={{ height: 300 }}
        javaScriptEnabled
      />

这适用于两个平台，内容按预期加载和显示。问题在于开发和更改该内容。

在 IOS 上，这是理想的——我对 index.html 所做的任何更改都会自动检测到，并导致 webview 重新加载新内容。

但是，在 Android 上，我可以看到“index.html”更改的唯一方法是完全重建和重新部署应用程序，这让事情变得非常困难。我确定这是由于两个平台所必需的require 与uri 方法，但我不确定如何自动将更新部署到android_assets，或者是否甚至可以不重建？

我也可以将index.html 内容作为原始字符串传递（即使用source={{ html: myHtml }}），但如果myHtml 真的很大，这会影响性能吗？

有没有一种很好的方法来配置 Android webviews 以在不完全重建的情况下查看内容更改？

【问题讨论】：

标签： javascript android react-native react-native-webview

【解决方案1】：

对于它的价值，我通过在我的开发机器上运行本地 http 服务器并将 android web 视图指向它来解决这个问题（在某种程度上）：

  const sourceUri = isEmulator
    ? 'http://10.0.2.2:9000/dist/index.html'
    : 'file:///android_asset/dist/index.html';

    return (
      <WebView
        source={
          Platform.OS === 'ios' ? require('../../assets/dist/index.html') : { uri: sourceUri }
        }
        ...
      />

它不会在更改时自动刷新，但至少我可以在不完全重建的情况下重新加载 webview。

【讨论】：