Question

我要在网络视图中显示“ html文件”的内容

import HTML_FILE from '../screens/imagecropper.html';

<WebView
     originWhitelist={['*']}
     source={HTML_FILE}
     javaScriptEnabled={true}
/>

这是html代码

<!DOCTYPE html>
<html>
<head>
    <title>Moodle</title>
</head>
<body>
    <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
    <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
    <h1>Homepage Headline</h1>
    <p>This is a paragraph.</p>
</body>
</html>

预期结果是主页标题

这是一个段落。

但是只是阅读内容并显示代码

<!DOCTYPE html>
<html>
<head>
    <title>Moodle</title>
</head>
<body>
    <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
    <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
    <h1>Homepage Headline</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Answer 1

您可以通过这种方式完成

对于android而言：将您的html文件粘贴到assets文件夹中，而不是通过这种方式可以获取

source={{uri:'file:///android_asset/webpage.html'}}
对于iOS，在iOS中创建一个文件夹并在其中添加文件。然后像这样

source={{uri:'./htmls/webpage.html'}}

在React Native中如何调用本地文件作为Webview的源

1 个答案: