我尝试找到将Iframe添加到我的 native 应用程序的任何方法。
我找到了react-iframe,但是对我来说不起作用。我关注了文件。我只是导入react-iframe并复制iframe标签以使用。
我的结果如下图所示。
react-native - 如何在React Native中使用Iframe?-LMLPHP

我需要在React 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值,例如:
<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
            title="iframe Example 1" width="400" height="300">
</iframe>

注意:,因为source.html参数可以是任何html字符串,所以您也可以直接传递iframeString而无需任何html页面包装器。就我而言,我发现使用外部html包装器代码自定义显示的内容会更容易。

有关Webview的更多信息,请参见:

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

07-24 09:39
查看更多