Question

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

我需要在React本机应用程序中使用iframe的其他方法。谢谢。

Answer 1

尝试使用WebView：

import { WebView } from 'react-native';

....

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

我用它来显示不同的网络内容，包括iframe，并且效果很好。

https://facebook.github.io/react-native/docs/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

从'react-iframe'导入iframe

<Iframe url = "http://www.youtube.com/" width="450px" height="450px" id="myId" className="myClassname" display="initial" position="relative"  allowFullScreen/>

如何在React Native中使用Iframe？

3 个答案: