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

Question

我想在我的 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 中的高度和宽度，但没有任何区别。为什么按钮这么小，我怎样才能把它变大？

谢谢！

Answer 1

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

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

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

Facebook like button iframe appears very small on react-native webview

react-native

iframe

facebook-iframe

react-native-webview