如何使用 React Native Facebook SDK GraphRequest 获得高质量的个人资料图片？答案

【问题标题】：How can I get a high quality profile picture using React Native Facebook SDK GraphRequest?如何使用 React Native Facebook SDK GraphRequest 获得高质量的个人资料图片？
【发布时间】：2020-12-05 02:03:44
【问题描述】：

我正在尝试使用 React Native Facebook SDK 获取高分辨率图片，但是默认图像质量很差。它是 50x50 且分辨率非常低。

请求：

new GraphRequest('/135121013672357',
  {
    parameters: {
      fields: {
        string: 'picture'
      }
    }
  },
  _responseInfoCallback
)

回应

{
  "picture": {
    "data": {
      "is_silhouette": false,
      "url": "https://scontent.xx.fbcdn.net/v/t1.0-1/p50x50/16864988_145199975997794_4154735936748679550_n.jpg?oh=bb5f32ecb73dd9b8fb8ac45920e2ffc5&oe=593223A8"
    }
  },
  "id": "135121013672357"
}

查看Facebook's Graph API docs，有一个参数“type”，据此可以请求特定大小（小、中、大）。然而，不清楚的是如何格式化该请求。

picture?type=large // Error

picture{type:large} // 200 However, picture is omitted from Response

【问题讨论】：

标签： javascript facebook facebook-graph-api react-native facebook-javascript-sdk

【解决方案1】：

尝试使用Graph API field expansion获取资源：

picture.type(large)

【讨论】：

该文档中没有显示短语“.type”和“large”

【解决方案2】：

您还可以使用 .height 和 .width 来获得更高分辨率的图片或您需要的分辨率：

480x{any-width} 图像的示例端点： /me?fields=id,name,picture.height(480),[:other_fields]

{any-height}x480 图像的示例端点： /me?fields=id,name,picture.width(480),[:other_fields]

最大分辨率图像的示例端点： /me?fields=id,name,picture.height(10000),[:others_fields]

官方文档位于/{node-id}/picture 页面https://developers.facebook.com/docs/graph-api/reference/user/picture/。您可以在不通过应用程序调试的情况下试用 API：https://developers.facebook.com/tools/explorer/

【讨论】：

【解决方案3】：

这是一个示例，说明我们如何使用 react-native-fbsdk 包以简单的方式获取大型 Facebook 用户个人资料的图片。

try {
  const currentAccessToken = await AccessToken.getCurrentAccessToken()

  const graphRequest = new GraphRequest('/me', {
    accessToken: currentAccessToken.accessToken,
    parameters: {
      fields: {
        string: 'picture.type(large)',
      },
    },
  }, (error, result) => {
    if (error) {
      console.error(error)
    } else {
      console.log(result.picture.data.url)
    }
  })

  new GraphRequestManager().addRequest(graphRequest).start()
} catch (error) {
  console.error(error)
}

【讨论】：

获取当前 url，但进入该 url 后，正在下载整个图像，给定 url => https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=10218466988484935&height=200&width=200&ext=1553452039&hash=AeSo-QHBXC1UZzxK
知道如何解决这个问题吗？我和@DanteCervantes处于同样的境地

【解决方案4】：

onFBLogin = async () => {
        try{
        const result = await LoginManager.logInWithPermissions([
           'public_profile',
           'email',
        ]);
       const tokenObj = await AccessToken.getCurrentAccessToken();
        const infoRequest = new GraphRequest(
            '/me',
            {
                accessToken: tokenObj.accessToken,
                parameters: {
                    fields: {
                        string: 'email,name,first_name,middle_name,last_name,gender,address,picture.type(large)',
                    },
                },
            },
            this.infoResponseCallback,
        );
       new GraphRequestManager().addRequest(infoRequest).start()
    }catch(err){
        console.log("error",err)
    }

infoResponseCallback = (error,success) =>{
        if(error){
              console.log("eeeeeeeeeee",error)
        }else{
              console.log(success)
        }
    }

【讨论】：