从设备本地文件系统响应本机webview负载
Won*_*Suh 18 webview react-native
我试图加载.html,.js,.css从设备的本地文件系统中的文件到本机作出反应的WebView组件.我能够获取index.html文件的路径,但将其指定为WebView 的url只会引发错误.我该怎么做？请帮忙!
Ria*_*ias 15
在本机反应中,现在可以要求HTML文件并将其用作Web视图的源(如此路径相对于您使用它的反应原生文件):
const webapp = require('./webapp/index.html');
并在WebView中使用它如下:
<WebView source={webapp} />
不幸的是,这不会加载HTML中引用的CSS和JavaScript文件.解决方案可以是内联编写所有CSS和JS(例如,通过使用构建过程).
- 以上代码段在iOS上运行良好.但是在Android上,它不适用于发布版本,但在开发过程中有效.知道为什么会这样吗？ (5认同)
通过使用{html:,baseUrl:}作为源,我能够将html5/javascript包含到项目中.但坦率地说,这更像是一个幸运的镜头.
<WebView source={{ html: HTML, baseUrl: 'web/' }} />我有index.html,它需要pano2vr_player.js和pano.xml才能使这段代码正常工作.
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>
);
}
}最后将文件/文件夹('/ web'与baseUrl相同)添加到XCode项目中
它的工作原理!但我不知道怎么......
我偶然发现了同样的问题，经过几个小时的尝试各种解决方案后，我终于按照本教程解决了它。向作者致以崇高的敬意。
文章中有一些额外的信息有点过时，所以这里是简洁的版本：
- 在主项目根目录中创建一个文件夹（例如
/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：
android {
...
sourceSets {
main { assets.srcDirs = ['src/main/assets', '../../html'] }
}
}
这将加载您index.html及其所有 js 和 css 文件，只要它们包含在捆绑包中即可。
您可能必须包装自己的本机模块才能执行此操作。React Native 的 WebView 使用UIWebView，有关加载本地文件的信息请查看此处： https: //gist.github.com/amster/9160860
不过建议您使用WKWebView，您可以自己包一个，比较容易。目前有一个正在开发中的存储库：https://github.com/qrush/react-native-wkwebview
使用完成加载本地资源WKWebView可以在这个答案中找到：/sf/answers/2007350761/