如果您正在处理资源,项目目录在构建项目后会与设备目录不同,因此您不能仅通过字符串URL引用它们。
Expo
如果使用Expo,则必须require
每个资产,然后在要缓存到设备本地存储的require
上使用useAssets
。
useAssets
将返回一个包含localUri
(这是已缓存图像的URI)的对象。
然后,您可以使用localUri
并将其作为图像的src
。
import { useAssets } from 'expo-asset';
const IndexHTML = require('./assets/index.html');
const myImage = require('./assets/splash.png');
const [imgSrc, setImgSrc] = useState('');
const [image, imerr] = useAssets(myImage);
const [html, error] = useAssets(IndexHTML);
const webViewProps = {
javaScriptEnabled: true,
androidLayerType: 'hardware',
originWhitelist: ['*'],
allowFileAccess: true,
domStorageEnabled: true,
mixedContentMode: 'always',
allowUniversalAccessFromFileURLs: true,
onLoad: () => {
console.log(image[0].localUri);
setImgSrc(image[0].localUri);
},
source: {
html: '<img src="' + imgSrc + '"/>',
},
};
return <WebView {...webViewProps} />
const webViewProps = {
...
source: IndexHTML,
};
注意:对于 Expo 方法,IndexHTML 中引用的文件将找不到
窍门是将您的 HTML 转换为 字符串文字
以利用 模板字符串。
然后,您必须手动要求每个这些资产来连接 localUrl
。
require()
支持有限类型,您需要在根文件夹中添加 metro.config.js
。
如果您 require()
一个 .js
文件,它会出现错误,因为它将其读取为模块,解决方法是 打包您的资产
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push(
'css', 'ppt', 'obj'
);
module.exports = config;
此外,Expo 可以热重载使用缓存资产所做的更改。
React Native
如果你的目录中有 android 文件夹,请导航到
android > app > build.gradle
然后添加。
android {
sourceSets {
main { assets.srcDirs = ['src/main/assets', '../../source/assets/'] }
}
. . .
最后,你在Gradle中链接的相对文件夹可以通过file:///android_asset/
访问。
例如:file:///android_asset/index.html
-> /asset/index.html
return <WebView source={{uri: `file:///android_asset/index.html`}} />
替代方案
一个快速解决方案是集成静态服务器, 但这是一个最近的fork,它只适用于vanilla react native。