Question

我正在尝试将设备本地文件系统中的.html，.js，.css文件加载到React Native WebView组件中。我能够获取index.html文件的路径，但将其指定为WebView的 url 只会引发错误。我该怎么做？请帮忙！

Answer 1

在本地反应中，现在可以要求一个HTML文件并将其用作Web视图的源（这个路径是相对于您使用它的反应原生文件）：

const webapp = require('./webapp/index.html');

并在 WebView 中使用它，如下所示：

<WebView source={webapp} />

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

Answer 2

通过使用{html：，baseUrl：}作为源，我能够将html5 / javascript包含到项目中。但坦率地说，它更像是一个幸运的镜头。

＆＃13;

<WebView source={{ html: HTML, baseUrl: 'web/' }} />

＆＃13;

我有index.html，需要使用pano2vr_player.js和pano.xml才能使这段代码正常工作。

＆＃13;

const HTML = `
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="mobile-web-app-capable" content="yes" />
		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
			}
    </style>
	</head>
	<body>
		<script type="text/javascript" src="pano2vr_player.js">
		</script>
		<div id="container" style="width:100%;height:100%;">
		<br>Loading...<br><br>
		This content requires HTML5 with CSS3 3D Transforms or WebGL.
    </div>
		<script type="text/javascript">
			// create the panorama player with the container
			pano=new pano2vrPlayer("container");
		  window.addEventListener("load", function() {
			  pano.readConfigUrlAsync("pano.xml");
		  });
		</script>
	</body>
</html>`;

class PanoView extends Component {

  render() {
    return (
      <View>
        <WebView
          style={{ flex: 1, width: 1024, height: 768 }}
          source={{ html: HTML, baseUrl: 'web/' }}
          javaScriptEnabledAndroid={true} />
      </View>
    );
  }
}

＆＃13;

最后将文件/文件夹（＆＃39; / web＆＃39;与baseUrl相同）添加到XCode项目

它有效！但我不确定如何...

Answer 3

您可能需要打包自己的本机模块才能执行此操作。 React Native的WebView使用UIWebView，有关加载本地文件的信息，请查看此处：https://gist.github.com/amster/9160860

但是建议你使用WKWebView，你可以相对容易地自己包装一个。目前有一个名为WIP的仓库：https://github.com/qrush/react-native-wkwebview

使用WKWebView完成加载本地资源可以在以下答案中找到：https://stackoverflow.com/a/28676439/398136

Answer 4

将此脚本放在任何ReactNative文件或您的代码中，推荐给第一个或顶级索引文件。它将解决问题，在RN0.39上进行测试

import { Platform } from 'react-native';
import { setCustomSourceTransformer } from 'react-native/Libraries/Image/resolveAssetSource';

setCustomSourceTransformer(function (resolver) {

  if (Platform.OS === 'android'
    && !resolver.serverUrl
    && !resolver.bundlePath
    && resolver.asset.type === 'html') {
    resolver.bundlePath = '/android_asset/';
  }

  return resolver.defaultAsset();
});

Answer 5

我偶然发现了一个相同的问题，经过数小时的尝试各种解决方案，我终于遵循this tutorial解决了这个问题。对作者的主要荣誉。

在文章中，有些额外的信息有些过时了，所以这里是简洁的版本：

在您的主项目根目录中创建一个文件夹（例如/html）；
将所有文件放在一个文件夹中（例如Web，其中index.html是WebView入口点），给它一个扩展名.bundle（例如Web.bundle），然后将其放入/html;

现在，您必须将这些文件添加到项目中，以便在下一个版本中将它们识别并捆绑在一起，此过程在iOS和Android中的操作有所不同：

iOS：在Xcode中打开您的项目，将Web.bundle拖放到项目的主文件夹中，并确认未选中“如果需要复制项目”选项的对话框；
Android：打开/android/app/build.gradle并添加：

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

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

在您的WebView文件中，计算到index.html的路径并将其提供给WebView：

const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '')
    + 'Web.bundle/index.html';

return (
  <WebView
    source={{ uri: sourceUri }}
    originWhitelist={['*']}
    javaScriptEnabled={true}
    allowFileAccess={true}
  />
);

只要捆绑包中包含index.html及其所有js和css文件，就会加载它们。

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

5 个答案: