如何使用圖形API與react-native-fbsdk？

Question

我閱讀了文檔，均在github和Facebook developers docs之間。
只有樣品，沒有更多。沒有API文檔。

做出圖形API請求的代碼是

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

而且回調

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

，這裏是做一個圖形API請求

testRequestGraphAPI(){ 
    const infoRequest = new GraphRequest(
    '/me', 
    null, 
    this._responseInfoCallback, 
); 
    new GraphRequestManager().addRequest(infoRequest).start(); 
} 

功能

但是，我找不到任何進一步的文件。我不知道每個參數是做什麼的。

上面這些代碼的結果是這樣的。

我也不知道如何得到結果。

但是，當我嘗試將'\ me'修改爲'me？fields = id，name'時，它失敗了。 雖然我已要求允許

<LoginButton 
    publishPermissions={["publish_actions,user_birthday, user_religion_politics, user_relationships, user_relationship_details, user_hometown, user_location, user_likes, user_education_history, user_work_history, user_website, user_managed_groups, user_events, user_photos, user_videos, user_friends, user_about_me, user_status, user_games_activity, user_tagged_places, user_posts, user_actions.video, user_actions.news, user_actions.books, user_actions.music, user_actions.fitness, public_profile, basic_info"]} 
    onLoginFinished={ 
    (error, result) => { 
     if (error) { 
     alert("login has error: " + result.error); 
     } else if (result.isCancelled) { 
     alert("login is cancelled."); 
     } else { 
     AccessToken.getCurrentAccessToken().then(
      (data) => { 
      meow_accesstoken = data.accessToken 
      alert(meow_accesstoken.toString()) 
      } 
     ) 
     } 
    } 
    } 
    onLogoutFinished={() => alert("logout.")}/> 

但它不打印出了什麼錯誤，只是對象的對象。

所以，問題是我不明白Facebook提供的示例代碼沒有解釋。

這裏是我的問題，我真的需要你幫我：
首先，在所有的，請檢查javascript code，我現在在看什麼？
如何使用圖形API在反應，本機fbsdk檢索一些用戶信息（例如：全名）和成功顯示它（使用的警報）？
什麼參數GraphRequest（）做什麼？
什麼是錯誤對象和結果在_responseInfoCallback對象的結構？

SOLUTION
感謝@Samuel答案，我已經更新了我的代碼

testRequestGraphAPI: function(){  
     const infoRequest = new GraphRequest(
      '/me', 
      { 
      parameters: { 
       fields: { 
       string: 'email,name,first_name,middle_name,last_name' // what you want to get 
       }, 
       access_token: { 
       string: meow_accesstoken.toString() // put your accessToken here 
       } 
      } 
      }, 
      this._responseInfoCallback // make sure you define _responseInfoCallback in same class 
     ); 
    new GraphRequestManager().addRequest(infoRequest).start(); 
    } 

而且回調

_responseInfoCallback: function(error: ?Object, result: ?Object) { 
    alert("meow response"); 
    if (error) { 
     alert('Error fetching data: ' + error.toString()); 
     console.log(Object.keys(error));// print all enumerable 
     console.log(error.errorMessage); // print error message 
     // error.toString() will not work correctly in this case 
     // so let use JSON.stringify() 
     meow_json = JSON.stringify(error); // error object => json 
     console.log(meow_json); // print JSON 
    } else { 
     alert('Success fetching data: ' + result.toString()); 
     console.log(Object.keys(result)); 
     meow_json = JSON.stringify(result); // result => JSON 
     console.log(meow_json); // print JSON 
    } 
    } 

*注：執行console.log（），您需要使用「遠程調試JS」，然後打開Chrome開發者工具來查看日誌。

Answer 1

不幸的是，react-native-fbsdk文檔沒有更新，並且這些示例運行不正常。

我得到了同樣的問題，我通過嘗試和錯誤來解決它。

解決你的問題，你需要改變你的GraphRequest加入PARAMS和領域它是這樣的：

<LoginButton 
    onLoginFinished={ 
     (error, result) => { 
     if (error) { 
      alert("login has error: " + result.error); 
     } else if (result.isCancelled) { 
      alert("login is cancelled."); 
     } else { 

      AccessToken.getCurrentAccessToken().then(
      (data) => { 
       let accessToken = data.accessToken 
       alert(accessToken.toString()) 

       const responseInfoCallback = (error, result) => { 
       if (error) { 
        console.log(error) 
        alert('Error fetching data: ' + error.toString()); 
       } else { 
        console.log(result) 
        alert('Success fetching data: ' + result.toString()); 
       } 
       } 

       const infoRequest = new GraphRequest(
       '/me', 
       { 
        accessToken: accessToken, 
        parameters: { 
        fields: { 
         string: 'email,name,first_name,middle_name,last_name' 
        } 
        } 
       }, 
       responseInfoCallback 
      ); 

       // Start the graph request. 
       new GraphRequestManager().addRequest(infoRequest).start() 

      } 
     ) 

     } 
     } 
    } 
    onLogoutFinished={() => alert("logout.")}/> 

你需要啓用遠程JS調試查看console.log()信息。 https://facebook.github.io/react-native/docs/debugging.html

，也許你需要得到一些權限得到比姓名和電子郵件更多，所以它看起來Facebook的圖形API文檔是個好主意：https://developers.facebook.com/docs/graph-api/overview/

參考：

https://github.com/facebook/react-native-fbsdk/issues/105#issuecomment-206501550

Answer 2

這裏是一個自定義按鈕的例子，如果你想做一個:)

FbLoginButton() { 
LoginManager 
    .logInWithReadPermissions(['public_profile']) 
    .then(function (result) { 
    if (result.isCancelled) { 
     alert('Login cancelled'); 
    } else { 
     AccessToken 
     .getCurrentAccessToken() 
     .then((data) => { 
      let accessToken = data.accessToken 
      alert(accessToken.toString()) 

      const responseInfoCallback = (error, result) => { 
      if (error) { 
       console.log(error) 
       alert('Error fetching data: ' + error.toString()); 
      } else { 
       console.log(result) 
       alert('Success fetching data: ' + result.toString()); 
      } 
      } 

      const infoRequest = new GraphRequest('/me', { 
      accessToken: accessToken, 
      parameters: { 
       fields: { 
       string: 'email,name,first_name,middle_name,last_name' 
       } 
      } 
      }, responseInfoCallback); 

      // Start the graph request. 
      new GraphRequestManager() 
      .addRequest(infoRequest) 
      .start() 

     }) 
    } 
    }, function (error) { 
    alert('Login fail with error: ' + error); 
    }); 
    }