gpt4 book ai didi

react-native - 如何在 native react 中使用 Iframe?

转载 作者:行者123 更新时间:2023-12-03 09:45:08 25 4
gpt4 key购买 nike

我试图找到任何方法将 Iframe 添加到我的 native 应用程序中。
我找到了 react-iframe ,但它对我不起作用。我跟着文档。我只是导入 react-iframe 并复制 iframe 标签来使用。
我的结果如下图所示。
enter image description here

我需要其他方式在 native 应用程序中使用 Iframe。谢谢你。

最佳答案

尝试使用 react-native-webview :

import { WebView } from 'react-native-webview';

....

<WebView
scalesPageToFit={true}
bounces={false}
javaScriptEnabled
style={{ height: 500, width: 300 }}
source={{
html: `
<!DOCTYPE html>
<html>
<head></head> // <--add header styles if needed
<body>
<div id="baseDiv">${iframeString}</div> //<--- add your iframe here
</body>
</html>
`,
}}
automaticallyAdjustContentInsets={false}
/>
您可以使用 iframeString值(value)如:
<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
title="iframe Example 1" width="400" height="300">
</iframe>
备注:
1) source.html param 可以是任何 html 字符串,你也可以通过 iframeString直接没有任何 html 页面包装器。在我的情况下,我发现使用外部 html 包装器代码自定义显示的内容更容易。
2) 关于 iframe 和 rn-webview 的已知问题:
https://github.com/react-native-webview/react-native-webview/issues?q=iframe+is%3Aopen
3) 点心链接:
https://snack.expo.dev/@florindobre99/webview-example
关于 webview 的更多信息在这里:
https://github.com/react-native-community/react-native-webview

关于react-native - 如何在 native react 中使用 Iframe?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52907052/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com