如何在 React Native 中使用 iframe？

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

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

原文由 Mengseng Oeng 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k

<WebView source={{html: '<iframe width="100%" height="50%" src="https://www.youtube.com/embed/cqyziA30whE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'}} style={{marginTop: 20}} />

尝试使用 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" width="400" height="300">
</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

原文由 Florin Dobre 发布，翻译遵循 CC BY-SA 4.0 许可协议

如何在 React Native 中使用 iframe？

你尚未登录，登录后可以

为什么 expo 的 react native 项目的文件名会有 ( _ + 这些字符？

请问开发React Native，一般是推荐哪个主流的UI库呢？

是否所有的react-native组件都可以直接渲染为原生UI组件呢？

如何在expo-router的Tabs中垂直居中图标？

react-native 一般使用什么网络库？

React-Grid-Layout怎么做到移动(拖拽)某个元素，拖拽到哪就停到哪?

请问是应该如何正确使用React-Native-Paper的Drawer呢？

Stack Overflow 翻译