如何在 React Native 中使用 iframe？
Posted
技术标签:
【中文标题】如何在 React Native 中使用 iframe？【英文标题】：How to use Iframe in react native? 【发布时间】：2019-03-25 05:06:13 【问题描述】：我试图找到任何方法将 iframe 添加到我的 react 本机应用程序中。 我找到了react-iframe，但它对我不起作用。我跟着文件。我只是导入 react-iframe 并复制 iframe 标签以使用。 我的结果如下图所示。
我需要其他方式在 React Native 应用程序中使用 Iframe。谢谢你。
【问题讨论】：
【参考方案1】：尝试使用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 值，例如：
<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
title="iframe Example 1" >
</iframe>
注意事项：
1) 因为source.html 参数可以是任何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
【讨论】：
我同意你的回答，但它没有 100% 正确。谢谢 我测试了我的答案，效果很好。 snack.expo.io/HJFjnhVo7。您要求一种显示 iframe 的方法，我为您提供了一种工作方式，其中包含指向文档的链接，供您根据需要自定义响应。我不明白您为什么不接受它并使用简化的参数添加了相同的答案。 @FlorinDobre 不确定您是否知道，但上面的链接会产生以下错误：Minified React error #130
我上述评论中的小吃链接示例大约在 3 年前进行了测试。它现在可能不起作用，我已经很长时间没有测试它了。但是我回答中的 webview 代码应该仍然有效。
@Hyetigran 我更新了零食代码以使用社区网页视图：snack.expo.dev/@florindobre99/webview-example【参考方案2】：
我回答我的问题。
我使用 webview 来显示 iframe。
<WebView
source=html: '<iframe src="https://www.youtube.com/embed/cqyziA30whE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
style=marginTop: 20
/>
【讨论】：
同时使用 iframe 和 webview 有什么意义？这听起来是不必要的。同意@FlorinDobre。 如果我们使用WebView，我们可以在android上全屏吗？ @LakshanSS 是的，它像普通应用一样全屏，但不像原生应用那样流畅。 @DimitriKopriwa: 在codesandbox 开发？ community/WebView 似乎不适用于react-native-web，或者我忽略了他们的node.js 容器的东西。所有其他我们必须进入vs code，expobrowser 开发策略...我想没有两次构建原生应用程序是没有用的...等等，是的以上是关于如何在 React Native 中使用 iframe？的主要内容，如果未能解决你的问题，请参考以下文章
如何在React Native中使用CreateBottomTabNavigator？
如何在 react-native 中使用 FormData？
如何使用 React-Native 在 iOS 中禁用屏幕截图
React Native：如何使用 expo 在 webview 中制作全屏 youtube 嵌入视频（没有 react-native 链接）