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

标签 javascript react-native webview

我想在 WebView 中显示“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>

最佳答案

你可以这样做

  • 对于android:将您的html文件粘贴到assets文件夹中,这样您就可以通过这种方式获取它

    source={{uri:'file:///android_asset/webpage.html'}}

  • 对于 iOS,在 iOS 中创建一个文件夹并在其中添加文件。像这样得到它

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

关于javascript - 如何在React Native中调用本地文件作为Webview的源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56147749/

相关文章:

javascript - 将 $_GET 值传递给加载 jquery 的网页

javascript - 无法理解 `setTimeout()` 中的最小超时值

ios - 下载图像无法在 IOS 设备上运行 - React Native

javascript - 在 react 导航中传递 id 与传递对象

android - 加载 webview 时如何更改字体大小?

javascript - ExtJS 4 - 分别将 CSS 应用于网格标题

javascript - 按钮 onclick 事件不会在 JavaScript 中触发

reactjs - 如何修复 JSX 表达式必须有一个父元素?

java - Android:使用 CSS 问题在 WebView 中自定义字体

visual-studio-code - 在vscode提供的WebView中播放声音