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

Question

我想在我的本机应用程序上显示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占用尽可能多的可用空间。

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