我试图找到任何方法将 Iframe 添加到我的 native 应用程序中。
我找到了 react-iframe ，但它对我不起作用。我跟着文档。我只是导入 react-iframe 并复制 iframe 标签来使用。
我的结果如下图所示。
我需要其他方式在 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/