[英]Load Local HTML with local css, js in React Native Webview
我想在我的本机 webview 中加载本地 html、css、js 文件,但我无法加载应用于 html 的 css,请参考我的文件夹结构
上面是我的 html 以及 css 图像和 js 文件,我将它们全部放在我的应用程序文件夹结构中,如下所示
src --> html --> demo --> 将上面的所有文件粘贴到下面的图片中
现在我在我的实际屏幕中使用了这个 html,如下所示
let demoHtmlData = require('../../../html/demo/demo.html')
<WebView
style={{flex: 1}}
source={demoHtmlData}
/>
当我运行上面的代码时,html 已加载但 css 未应用颜色、样式等。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>VIVJOA®</title>
<meta name="apple-mobile-web-app-status-bar-style" content="#7D5895">
<meta name="theme-color" content="#7D5895" />
<link href="css/style.css" rel="stylesheet">
</head>
在上面的代码中,css/style.css 没有应用我的 webview,所以知道如何解决这个问题吗?
你必须将你的 html 和 css 文件放在文件夹中,对于 android 放置在 android_asset 内的 android 文件夹内,对于 ios 放置在 ios 文件夹内的资源内。
if(isAndroid){
return (
<WebView
style={{flex: 1}}
originWhitelist={['*']}
source={{uri:'file:///android_asset/index.html'}}
style={{ marginTop: 20 }}
javaScriptEnabled={true}
domStorageEnabled={true}
/>
)
}else{
return(
<WebView
style={{flex: 1}}
originWhitelist={['*']}
source={'./resources/index.html'}
style={{ marginTop: 20 }}
javaScriptEnabled={true}
domStorageEnabled={true}
/>
);
}
更多参考来自: WebView Html load from local
查看此官方指南: https ://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files
在本次讨论中,您可以找到解决问题的可能方法:
https://github.com/react-native-webview/react-native-webview/issues/428
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.