从设备本地文件系统反应原生webview加载

我试图从设备的本地文件系统加载.html，.js,.css文件到React Native WebView组件。我能够获得index.html文件的路径，但将WebView指定为url只会引发错误。我会怎么做呢？请帮忙！从设备本地文件系统反应原生webview加载

来源

2015-11-03 Wonil Suh

您可能必须包装自己的本机模块才能做到这一点。反应原住民的WebView中使用UIWebView，对信息上加载本地文件到这里看看：但是我们建议您使用WKWebViewhttps://gist.github.com/amster/9160860

，可以相对容易地自己包裹之一。目前回购是WIP：https://stackoverflow.com/a/28676439/398136

来源

2015-11-04 22:54:37 stan229

在反应原生现在可能需要一个HTML文件，并使用它作为源：https://github.com/qrush/react-native-wkwebview

完成加载使用WKWebView本地资源可以在这个答案中找到像这样的Web视图（路径是相对于反应本地文件，你使用它）：

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

像这样使用它在的WebView：

<WebView source={webapp} />

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

来源

2016-03-05 15:57:20 Rias

上面的代码片段在iOS上很好用。但在Android上，它不适用于发布版本，但在开发过程中可用。任何想法为什么如此？ – varunvs

其实我没有一个主意。我希望它也能在Android上工作。 – Rias

@varunvs你发现它为什么不能在发布模式下工作在android上吗？ –

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

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

我的index.html，需要pano2vr_player.js和pano.xml使此代码工作。

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

最后添加文件/文件夹（ '/网络' 一样的baseUrl）到XCode项目

和它的作品！但我不知道如何...

来源

2016-10-16 04:14:28 Doppio

将此脚本放在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(); 
});

来源

2017-01-18 13:27:44 dryymoon

从设备本地文件系统反应原生webview加载

回答

相关问题