如何使用 React Native Facebook SDK GraphRequest 获得高质量的头像？

Question

我正在尝试使用 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

Answer 1

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

picture.type(large)

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

官方文档位于 https://developers.facebook.com/docs/graph-api/reference/user/picture/ 的 /{node-id}/picture 页面。您可以在 https://developers.facebook.com/tools/explorer/

上试用 API 而无需通过应用进行调试

Answer 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)
}

Answer 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)
        }
    }

如何使用 React Native Facebook SDK GraphRequest 获得高质量的头像？

How can I get a high quality profile picture using React Native Facebook SDK GraphRequest?

javascript

facebook

facebook-graph-api

facebook-javascript-sdk

react-native