Question

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

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

我已如图所示将Web文件夹插入了3次（实际上只需要插入一次，这仅用于测试）。每个“网络”文件夹均包含ponies.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,
    }
})

谢谢！

Answer 1

当前，您的网络文件夹位于android文件夹内

添加文件夹网站并使用以下结构：

app/web/ponies.jpg

使用web /作为基本URL。

最后一个难题是将Web文件夹添加到XCode项目中（在XCode中执行此操作）。否则，Web文件夹中的文件将不包含在为ios设备构建的捆绑软件中。

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

Answer 2

好的，所以我找到了android的解决方案/解决方法：D在另一个答案中实际上已经看到了这一点，但将进行一些扩展：

baseUrl必须为'file：/// android_asset /'。
然后您在android文件夹中创建一个目录，即“ root / android / app / src / main / assets”（有关详细信息，请参见此答案how to reference an asset in a library project）。
这两个文件夹现在相同。您放置在资产中的任何内容都应该在网络视图中看到。
重要-然后，我不得不重新运行'react-native run-android'才能显示图像。

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

2 个答案: