如何在 react-native-webview 中使用 baseURL

我无法让baseUrl参数在react-native-webview中工作。我的项目结构如下：

root  
---> _tests _  
---> android  
-------> web  
---> ios  
---> node_modules  
---> src  
-------> components  
------------> web  
------------> MyComponent.js  
---> web

如图所示，我已经插入了 web 文件夹 3 次(实际上只需要一次，这只是为了测试(。每个"网络"文件夹都包含小马.jpg。但是，React Native 不会拾取任何内容。我只得到 4 张带有 alt(即"小马"(的损坏图像。我也尝试使用baseUrl："web/"无济于事。以下是 MyComponent 中的代码.js：

import React from 'react';
import {View, Text, StyleSheet, Image} from "react-native";
import {WebView} from "react-native-webview";
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="ponies.jpg" alt="Ponies" height="42" width="42">
    <img src="ponies.jpeg" alt="Ponies" height="42" width="42">
    <img src="./ponies.jpg" alt="Ponies" height="42" width="42">
    <img src="./ponies.jpeg" alt="Ponies" height="42" width="42">
</body>
</html>
`;
export default class MyComponent extends React.Component {
    render() {
        return (
            <View style = {styles.container}>
                <WebView
                    style = {styles.webview}
                    source = {{html: html, baseUrl: 'web/'}}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        height: 350,
        width: 350
    },
    webview: {
        height: 350,
    }
})

谢谢！

好的，

所以我找到了安卓:D的解决方案/解决方法实际上在另一个答案中看到了这一点，但我要扩展一点：

baseUrl 需要是"file:///android_asset/"。
然后，您在 android 文件夹中创建一个目录，即"root/android/app/src/main/assets"(有关如何在库项目中引用资源的详细信息，请参阅此答案(。
这两个文件夹现在相同。您放入资产中的任何内容都应由 Web 视图查看。
重要提示 - 然后我不得不重新运行"反应原生运行-android"才能显示图像。

目前，您的网络文件夹位于安卓文件夹中

添加一个文件夹 web 并使用以下结构：

app/web/ponies.jpg

使用 web/作为基本网址。

拼图的最后一部分是将 Web 文件夹添加到 XCode 项目中(在 XCode 中执行此操作(。否则，Web 文件夹中的文件不会包含在为 ios 设备构建的捆绑包中。

注意：其中应用程序是应用程序的根目录。

相关内容

最新更新

热门标签：