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

Question

我有一个 webview 组件加载了一些 html 和 javascript。 html + javascript 相当大，使用 webpack 编译成单个页面（html、javascript 和 css 都在一个文档中）。我在想出一种相当有效的方法来开发我的 Web 内容时遇到了麻烦，我可以使用一些建议。

我的 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 vs uri 这两个平台所必需的方法，但我不确定如何自动将更新部署到 android_assets，或者这是否可能没有重建？

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

是否有配置 Android webviews 以在不完全重建的情况下查看内容更改的好方法？

Answer 1

为了它的价值，我通过运行我的开发机器上的本地 http 服务器并指向 android 网络视图来解决这个问题（有点）：

  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。

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

Recommendations for developing webview content on Android?

javascript

android

react-native

react-native-webview