webview - para - manual de programacion android pdf
reaccionar a la carga de la vista web nativa desde el sistema de archivos local del dispositivo (4)
Pude incluir html5 / javascript en el proyecto usando {html:, baseUrl:} como fuente. Pero para ser sincero, es más como un golpe de suerte.
<WebView source={{ html: HTML, baseUrl: ''web/'' }} />
Tengo index.html, que requiere pano2vr_player.js y pano.xml para que este código funcione.
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>
);
}
}
Y finalmente agregue archivos / carpeta (''/ web'' igual que baseUrl) al proyecto XCode
¡Y funciona! Pero no estoy seguro de cómo ...
Estoy intentando cargar archivos .html , .js , .css del sistema de archivos local del dispositivo en el componente React Native WebView. Pude obtener la ruta al archivo index.html pero especificar esto como la url para WebView simplemente arroja un error. ¿Cómo voy a hacer esto? ¡Por favor ayuda!
Coloque esta secuencia de comandos en cualquier archivo de ReactNative o su código, recomendado para el archivo de índice primero o superior. Y solucionará el problema, probado en 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();
});
Es posible que deba envolver su propio Módulo nativo para hacer esto. WebView de React Native usa UIWebView , para obtener información sobre UIWebView cargar un archivo local, mire aquí: https://gist.github.com/amster/9160860
Sin embargo, se recomienda utilizar WKWebView , puede envolver uno usted con relativa facilidad. Actualmente hay un repositorio que es WIP: https://github.com/qrush/react-native-wkwebview
Puede encontrar la carga de recursos locales utilizando WKWebView en esta respuesta: https://.com/a/28676439/398136
En reaccionar nativamente ahora es posible requerir un archivo HTML y usarlo como fuente para la vista web de esta manera (la ruta es relativa al archivo nativo de reacción en el que lo usa):
const webapp = require(''./webapp/index.html'');
y el uso en WebView como este:
<WebView source={webapp} />
Lamentablemente, esto no carga archivos CSS y JavaScript, a los que se hace referencia en el HTML. Una solución podría ser, escribir todo el CSS y JS en línea (por ejemplo, mediante el uso de un proceso de compilación).