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

【问题标题】：How to use baseURL in react-native-webview?如何在 react-native-webview 中使用 baseURL？
【发布时间】：2019-07-06 10:04:38
【问题描述】：

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

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

如图所示，我已经插入了3次web文件夹（实际上只需要一次，这只是为了测试）。每个“web”文件夹都包含 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,
    }
})

谢谢！

【问题讨论】：

标签： reactjs react-native android-webview native

【解决方案1】：

好的，所以我找到了适用于 android 的解决方案/解决方法：D 实际上已经在另一个答案中看到了这一点，但我会扩大一点：

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

【讨论】：

知道如何为 ios 做同样的事情吗？
怕不是阿德里安，从那以后我就没看过这个！祝你找到解决方案好运

【解决方案2】：

目前，您的 web 文件夹位于 android 文件夹中

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

app/web/ponies.jpg

使用 web/ 作为基本 URL。

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

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

【讨论】：

嗨，Piyush，不幸的是，这没用！我在这里有一个文件：'root/web/ponies.jpg'。我也有'web/'作为baseUrl。但是，Android上仍然没有任何显示。我需要在 Android 目录中添加任何内容才能使其正常工作吗？我还没试过ios。
将文件存储在DocumentDirectoryPath 中不是更有意义吗？我也在为此苦苦挣扎：stackoverflow.com/questions/60371739/…