react-native-fbsdk 发布消息 facebook Graph API FBGraphRequest

Posted 2023-03-17

【中文标题】react-native-fbsdk 发布消息 facebook Graph API FBGraphRequest

【英文标题】：react-native-fbsdk post message facebook Graph API FBGraphRequest

【发布时间】：2016-08-03 17:05:31

【问题描述】：

我浏览了FBSDK Sharing documentation here，但我找不到一个简单的示例，可以使用 FBShareDialog 将简单的消息发布到时间线（不是链接、不是照片、不是视频）。 我知道我可以运行一个基本上可以做到这一点的网络请求：

POST graph.facebook.com/me/feed?
message="My new post message!"&
access_token=your-access-token

如 Graph API 文档中所述，但同样 - 我想使用 ShareDialog 来获得一致的 UI。

我该怎么做？谢谢。

【参考方案1】：

注意：所有用户小写“post”是指发布到用户墙的行为。全部大写的“POST”指的是HTTP请求方法。

Facebook 官方的 react native SDK 位于这里https://developers.facebook.com/docs/react-native/

注意有三个不同的组件：

登录 分享 图形 API。

前两个是不言自明的，网站上提供了示例。

Graph API 是获取数据进出 Facebook 的主要方式 社交图。它是一个基于 HTTP 的低级 API，用于查询 数据、发布新故事、上传照片和其他各种任务 应用程序可能需要做的事情。

Facebook Graph API 只是一个 REST API，它允许您通过 HTTP 方法（GET、POST、DELETE 等）与 fb 数据进行交互。 react-native-fbsdk 只是在它上面一层，这使得这些请求更容易。

发布到用户时间有两个先决条件。

确保您的 fb 应用程序设置正确：https://developers.facebook.com/apps/ 获取具有 publish_actions 权限的用户访问令牌可用于发布新帖子。

获得这些信息后，您可以使用 React Native GRAPH API 发布消息。

但首先让我们看看如何简单地使用 HTTP 而不是 RN-SDK：

https://developers.facebook.com/docs/graph-api/reference/v2.7/user/feed

POST /v2.7/me/feed HTTP/1.1
Host: graph.facebook.com
message=This+is+a+test+message

据此，我们需要向 /v2.7/me/feed 位置发出 POST 请求，并将消息定义为参数。

最后回答你的问题，我们如何使用 react native sdk() 发布到用户时间轴。让我们看看 rnsdk 文档：https://developers.facebook.com/docs/react-native/graph-api

看来我们需要两个对象GraphRequest（创建请求）和GraphRequestManager（发送请求）

const FBSDK = require('react-native-fbsdk');
const 
  FBGraphRequest,
  FBGraphRequestManager,
 = FBSDK;

由于没有提供如何使用这两个对象发布到用户墙的示例，我们需要查看源代码：

https://github.com/facebook/react-native-fbsdk/blob/master/js/FBGraphRequest.js

我们可以从构造函数中看到它需要三个参数：

  /**
   * Constructs a new Graph API request.
   */
  constructor(
    graphpath: string,
    config: ?GraphRequestConfig,
    callback: ?GraphRequestCallback,
  ) 

我们从 Graph API 文档中知道 graphPath = "/me/feed"。回调将只是一个在请求返回时调用的函数。这给我们留下了配置对象，它在源代码中定义为：

type GraphRequestConfig = 
  /**
   * The httpMethod to use for the request, for example "GET" or "POST".
   */
  httpMethod?: string,
  /**
   * The Graph API version to use (e.g., "v2.0")
   */
  version?: string,
  /**
   * The request parameters.
   */
  parameters?: GraphRequestParameters,
  /**
   * The access token used by the request.
   */
  accessToken?: string
;

所以我们的配置对象看起来像这样：

const postRequestParams = 
            fields: 
                message: 'Hello World!'
            


const postRequestConfig = 
            httpMethod: 'POST',
            version: 'v2.7',
            parameters: postRequestParams,
            accessToken: token.toString() //pre-obtained access token

总而言之：

const FBSDK = require('react-native-fbsdk');
const 
  FBGraphRequest,
  FBGraphRequestManager,
 = FBSDK;

_responseInfoCallback(error: ?Object, result: ?Object) 
  if (error) 
    alert('Error fetching data: ' + error.toString());
   else 
    alert('Success fetching data: ' + result.toString());
  


const postRequestParams = 
  fields: 
         message: 'Hello World!'
      


const postRequestConfig = 
  httpMethod: 'POST',
  version: 'v2.7',
  parameters: postRequestParams,
  accessToken: token.toString()


const infoRequest = new GraphRequest(
  '/me/feed',
  postRequestConfig,
  this._responseInfoCallback,
);

new FBGraphRequestManager().addRequest(infoRequest).start();

【讨论】：

Shivam，感谢您的回答，但正如我的问题所示 - 我不想发布带有评论的链接，而只是向用户的时间线发布消息/文本。示例：“你好世界！”就是这样。 react-native-fbsdkshare 是否有一个可能的对话框？谢谢。

编辑并提供了演练

【参考方案2】：

我通过上面的代码使用 react native 0.43 发布到 facebook，但我在 postRequestParams 上进行了更改

const postRequestParams = 
  message: 
         string: 'Hello World!'
      

这就是我的全部。

const FBSDK = require('react-native-fbsdk');
const 
        GraphRequest,
        GraphRequestManager,
        AccessToken
 = FBSDK;
class PostScreen extends React.Component 
    postToFacebook = () => 
            AccessToken.getCurrentAccessToken().then(
                (data) => 
                    let tempAccesstoken = data.accessToken;
                    const _responseInfoCallback = (error, result) => 
                        console.log(result);
                    

                    const postRequestParams = 
                        message: 
                            string: "Hello world!"
                        
                    

                    const postRequestConfig = 
                        httpMethod: "POST",
                        version: "v2.9",
                        parameters: postRequestParams,
                        accessToken: tempAccesstoken
                    

                    console.log(postRequestConfig);

                    const infoRequest = new GraphRequest(
                        "/me/feed",
                        postRequestConfig,
                        _responseInfoCallback,
                    );
                    console.log("infoRequest");
                    console.log(infoRequest);

                    new GraphRequestManager().addRequest(infoRequest).start();
                );