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

Question

我浏览了FBSDK Sharing documentation here，但我找不到一个简单的例子，可以使用FBShareDialog在时间线上发布一条简单的消息(不是链接，不是照片，也不是视频)。我知道我可以运行一个web请求来做这件事，它实际上是这样做的：

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

正如在Graph API文档中所描述的，但同样-我想使用ShareDialog来拥有一致的UI。

我该怎么做呢？谢谢。

Answer 1

注意:所有用户的小写"post“指的是向用户墙发帖的行为。

Facebooks react原生SDK位于此处https://developers.facebook.com/docs/react-native/

请注意，有三个不同的组件：

1. Login
2. Sharing
3. 图形应用编程接口。

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

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

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

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

一旦您获得了这些，您就可以使用react原生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

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

最后，为了回答您的问题，我们将如何使用react原生sdk ()发布到用户的时间表。

似乎我们需要两个对象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"。回调将只是在请求返回时调用的函数。这就给我们留下了config对象，它在源代码中定义为：

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();

Answer 2

我用上面的代码在facebook上发布了react native 0.43，但我在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();
                });
        }
}