從設備本地文件系統反應原生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加載

回答

相關問題