如何在 React Native 中使用 Iframe？

Question

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

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

Answer 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" 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)Link吃零食:

https://snack.expo.dev/@florindobre99/webview-example

更多关于 webview 的信息：

https://github.com/react-native-community/react-native-webview

Answer 2

我回答我的问题。

我使用 webview 来显示 Iframe。

<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}}
/>

Answer 3

如何直接在webview源属性中添加iframe link 例如：

<WebView
   source={{uri: 'https://www.youtube.com/embed/cqyziA30whE'}}
   style={{marginTop: 20}}
/>

如何在 React Native 中使用 Iframe？

How to use Iframe in react native?

iframe

react-native

react-component