关于android：外部HTML资产未在生产版本中由React Native捆绑在一起供Webview使用


External HTML asset not bundled by React Native in production build for use by Webview

我正在使用React Native构建一个Android应用程序。 它具有一个Webview，可在本地读取HTML文件。

这是我用来渲染Webview的代码。

1
2
3
<WebView ref="webview"
      source={require('./helloworld.html')}
      javaScriptEnabled style={styles.webView} />

这在开发构建过程中效果很好。 HTML文件将加载到Webview上并呈现良好。

但它不在Android版本/生产版本上。 Web视图为空，如果我使用chrome：// inspect检查，则Web视图为空，并且不会加载HTML文件。

据我了解，React Native在Android生产构建期间未能将helloworld.html捆绑为资产。 我注意到它在iOS上运行良好。

知道如何解决吗？

根据此处https://github.com/facebook/react-native/issues/6004的讨论，这是一个已知的缺陷。资产未捆绑用于Android生产版本，但在开发版本中运行良好。

一种解决方案是手动将资产存储在Android资产文件夹中，然后使用

1
2
3
<WebView
    source={{ uri: 'file:///android_asset/helloworld.html' }}
    startInLoadingState={true} />
相关讨论

在RN 0.40，

1
require('./file.html')

在Build版本中对我来说是失败的。在调试版本中很好。

解决方法是，我可以将文件放入android资产目录中，然后

1
{ uri: file:///android_asset/file.html }

从那里加载。不幸的是，对于我的情况，该html文件加载了远程第三方库，这些库在内部引用了与协议无关的资源：例如//domain.com/file.json。因此，所有这些都变成了file://domain.com/file.json链接，当然失败了。
我猴子修补了XMLHttpRequest，将// ...更改为https：// ...，这解决了该问题，但是这些libs尝试加载的图像均不会加载。都坏了。而且，我一直无法找到一种方法来确定这些图像的请求，以了解为什么它们会中断/无法加载。

在iOS生产上构建此解决方案是可行的

1
2
3
<WebView
    source={{ uri: 'helloworld.html' }}
    startInLoadingState={true} />