Facebook like button iframe 在 react-native webview 上显得非常小答案

【问题标题】：Facebook like button iframe appears very small on react-native webviewFacebook like button iframe 在 react-native webview 上显得非常小
【发布时间】：2020-09-05 04:09:54
【问题描述】：

我想在我的 react-native 应用程序上显示 Facebook Like 按钮，以允许用户喜欢应用程序的 Facebook 页面，以便他们可以从 Facebook 上发布的应用程序接收更新。我想在 WebView 上使用 Facebook 的 Like 按钮 iFrame 以避免集成 SDK 只是为了在应用程序上有一个 Like 按钮，我想为其他社交媒体（如 Twitter 和 YouTube）添加类似的按钮。我在 Facebook 上创建了一个 Like 按钮 iFrame，并使用以下组件来显示 iFrame。

import React, { Component } from 'react'
import { SafeAreaView } from 'react-native'
import { WebView } from 'react-native-webview'

class SocialMediaLinksScreen extends Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <WebView
          source={{
            html:
              '<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FGalarmApp%2F&width=200&layout=standard&action=like&size=large&share=false&height=35&appId=1010058565805776" width="600" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>'
          }}
        />
      </SafeAreaView>
    )
  }
}

export default SocialMediaLinksScreen

下面是它的外观：

如您所见，按钮非常小。我尝试了不同的样式，还尝试更改按钮 iFrame 中的高度和宽度，但没有任何区别。为什么按钮这么小，我怎样才能把它变大？

谢谢！

【问题讨论】：

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

【解决方案1】：

您可以像这样将 scalesPageToFit 设置为 false。将 width 和 height 设置为 "100%" 可以让 iframe 占用尽可能多的可用空间。

<SafeAreaView style={{flex: 1}}>
        <WebView
          source={{
            html:
              '<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FGalarmApp%2F&width=200&layout=standard&action=like&size=large&share=false&height=35&appId=1010058565805776" width="100%" height="100%" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>'
          }}
          scalesPageToFit={false}
        />
      </SafeAreaView>

【讨论】：