从设备本地文件系统响应本机webview加载

我正在尝试将

.html

，

.js

，

.css

文件从设备的本地文件系统加载到React Native WebView组件中。我能够获得

index.html

文件的路径，但将其指定为WebView的url只会抛出一个错误。我该怎么办？请帮忙

要做到这一点，您可能需要包装自己的本机模块。React Native的WebView使用

UIWebView

，有关加载本地文件的信息，请查看此处：

但是，建议您使用

WKWebView

，您可以相对轻松地包装一个。目前有一份回购协议是在制品：

---

使用

WKWebView

加载本地资源可以在以下答案中找到：

在react-native中，现在可以要求一个HTML文件并将其用作web视图的源，如下所示（路径与您在其中使用的react-native文件相关）：

constwebapp=require（'./webapp/index.html'）；

并在网络视图中使用它，如下所示：

<WebView source={webapp} />

---

不幸的是，这不会加载HTML中引用的CSS和JavaScript文件。解决方案可以是，将所有CSS和JS内联编写（例如，通过使用构建过程）。

我能够通过使用{html:，baseUrl:}作为源代码将html5/javascript包含到项目中。 但坦率地说，这更像是一个幸运的机会

---

将此脚本放在ReactNative或您的代码的任何文件中，建议放在第一个或顶部索引文件中。 它将解决这个问题，在RN0.39上测试

从'react native'导入{Platform}；
从“react-native/Libraries/Image/resolveAssetSource”导入{setCustomSourceTransformer}；
setCustomSourceTransformer（函数（解析器）{
如果（Platform.OS==='android'
&&！resolver.serverUrl
&&！resolver.bundlePath
&&resolver.asset.type==='html'）{
resolver.bundlePath='/android_asset/'；
}
返回解析程序.defaultAsset（）；
});

我偶然发现了同样的问题，在兜了几个小时的圈子，尝试了各种各样的解决方案后，我最终通过以下方法解决了这个问题。对作者的重大荣誉

在这篇文章中，有一些额外的信息有点过时，因此这里是简明的版本：

• 在主项目根目录中创建文件夹（例如

  /html

  ）
• 将所有文件放在一个文件夹中（例如

  Web

  ，其中

  index.html

  是您的WebView入口点），给它一个

  .bundle

  扩展名（例如

  Web.bundle

  ），并将其放入

  /html

现在，您必须将这些文件添加到项目中，以便在下一次构建中识别并捆绑在一起，这一过程在iOS和Android中的实现方式有所不同：

• iOS：在Xcode中打开您的项目，拖放

  Web.bundle

  到项目的主文件夹中，并确认对话框中未选中“复制项目（如果需要）”选项
• Android：打开

  /Android/app/build.gradle

  并添加：

现在从头开始重建项目，使更改生效

在WebView文件中，计算

index.html

的路径并将其提供给WebView：

const sourceUri=（Platform.OS=='android'？'file:///android_asset/' : '')
+'Web.bundle/index.html'；
返回(
);

---

这将加载您的

index.html

及其所有js和css文件，只要它们包含在捆绑包中。

上述代码片段在iOS上非常有效。但在Android上，它在发布版本上不起作用，而是在开发过程中起作用。知道为什么吗？事实上我不知道。我希望它也能在Android上工作。@varunvs你找到为什么它不能在发布模式下在Android上工作了吗？Github上有一个关于这个问题的bug，但已经关闭了-一个解决方法是将HTML文件放在Android资产目录中。然后可以使用webview的源属性导入它。例如：

source={{uri:'file:///android_asset/index.html“}}

您可以查看Github线程中的注释以获取更多详细信息。@varunvs Github上的解决方案在Android上也不起作用。

android {
  ...
  sourceSets { 
    main { assets.srcDirs = ['src/main/assets', '../../html'] } 
  }
}