为什么 iOS 上的 react native webview 中的 iframe 不呈现内容？答案

【问题标题】：Why is the iframe within a react native webview on iOS not rendering content?为什么 iOS 上的 react native webview 中的 iframe 不呈现内容？
【发布时间】：2021-03-19 16:25:36
【问题描述】：

我有一个 ReactNative 应用程序，它只是使用 webview 来显示我们的反应网站。我们的网站允许用户查看电子邮件，为了正确呈现这些电子邮件，我们使用 iframe。所以我们的 iframe 看起来像这样：

<iframe className={'email-view-body-iframe'} srcDoc={pViewMessage.body}/>

其中 srcDoc 是要查看的消息的正文，可以是纯文本、旧版 rtf 消息或 html 消息。它可以在除 iOS 之外的所有平台上正常运行。

我浏览了 webview 文档，但没有看到任何突然出现在我身上的东西，我知道 iframe 就在那里，因为我用奇怪的颜色背景设置了它的样式，这样我就可以检查它确实是呈现在正确的位置。

有人能指出正确的方向吗？

【问题讨论】：

标签： ios react-native iframe react-native-webview

【解决方案1】：

要显示静态 HTML 或内联 HTML，您需要将 originWhiteList 设置为 *

import { WebView } from 'react-native-webview'; 

class MyInlineWeb extends Component { 
  render() { 
    return ( 
      <WebView 
        originWhitelist={['*']} 
        source={{ html: '<h1>Hello    world</h1>' }} /> 
    ); 
  } 
}

与上面的示例类似，您可以在 WebView 中加载 iFrame。

import { WebView } from 'react-native-webview'; 

class MyInlineWeb extends Component { 
  render() { 
    return ( 
      <WebView 
        originWhitelist={['*']} 
        source={{ html: "<iFrame src='your_URL' />" }} /> 
    ); 
  } 
}

如上例所示，您的 iFrame 已加载到 WebView 组件中。然后，您可以在 iFrame 中呈现任何网页或 URL。

【讨论】：

这似乎在模拟器中解决了，所以我要说谢谢！