我尝试找到将Iframe添加到我的 native 应用程序的任何方法。
我找到了react-iframe,但是对我来说不起作用。我关注了文件。我只是导入react-iframe并复制iframe标签以使用。
我的结果如下图所示。
我需要在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