如何从Graph API的回调返回数据

时间:2018-10-10 05:21:54

标签: react-native react-native-fbsdk

我正在尝试为我的react-native应用程序实现使用Facebook功能进行注册,并且目前我无法从配置文件中成功检索数据,并且已经在警报屏幕上进行了检查。这是我的代码,我在其中调用另一个组件的功能(FBLogin)。首先有一个可触摸的不透明度(Facebook登录按钮的自定义UI)

<TouchableOpacity  // This is in the Main Screen
          onPress={() => {
                this.goFacbookLogin()
              }}
</TouchableOpacity>

这是在onPress事件上调用的“我的功能”。

async goFacbookLogin(){ // This is also a function on the Main Screen

await FBLogin.facebookLogin().then((data) =>{
  alert("Data: " + JSON.stringify(data));
});

}

现在,FBLogin基本上是用于以Facebook登录的服务。它具有一个功能facbookLogin()

import React, { Component } from 'react';
import { View, Button, Dimensions } from 'react-native';
import {LoginManager, LoginButton, 
AccessToken,GraphRequest,GraphRequestManager } from 'react-native-fbsdk';


class FBLoginButton extends Component{// This is Implemented in another File 
 constructor(props) 
 {
  super(props);
  this.state = 
  {
    //screenWidth: Dimensions.get("window").width,
    //screenHeight: Dimensions.get("window").height,
    UserProfileInformation: 
    {
      UserAge: null,
      Gender: null,
      UserLocation: null,
      ImageUrl: null,
    }
   }
  }


async facebookLogin() 
{
  let _result;
  try 
  { 
    LoginManager.setLoginBehavior('NATIVE_ONLY');  
    _result = await LoginManager.logInWithReadPermissions(['public_profile', 
    "email","user_birthday", "user_gender","user_hometown"]);
    console.warn("Done");
  } 
  catch (nativeError) 
  {
   try 
   {
       LoginManager.setLoginBehavior('WEB_ONLY');
    _result = await LoginManager.logInWithReadPermissions(['public_profile', 
   "email", "user_birthday", "user_gender", "user_hometown"]);
   } 
   catch (webError) 
   {
     alert("Function Called Web Error");
   }
  }

 if (_result.isCancelled) 
 {
   alert('Login Cancel')
 } 
 else 
 {
     global.res1 = "None";
     const data = await AccessToken.getCurrentAccessToken();
     const infoRequest = new GraphRequest
     (
       '/me',
       {
         accessToken: data.accessToken,
         parameters: 
         {
           fields: 
           {
            string: 'first_name, name, gender, birthday, email, hometown'
           }
         }
       },
       (error, result) => {
       if (error) 
       {
         alert("error: " + JSON.stringify(error));
       } 
      else 
       {
         let UserProfileInformation = this.state.UserProfileInformation;  
         UserProfileInformation['Gender'] = result.gender;
         UserProfileInformation['UserLocation'] = result.hometown.name;
         this.setState({ UserProfileInformation: UserProfileInformation}, () 
        => console.warn("DDDDD: " + this.state.UserProfileInformation));
         res1 = result;
       }
     }
   );
    new GraphRequestManager().addRequest(infoRequest).start()
    return(this.state.UserProfileInformation);
  }
  //return "Done";
  }
 }
 export default FBLogin = new FBLoginButton();

现在的问题是,当图形请求启动InfoRequest时,它会在回调函数中成功获取数据,但是我不知道如何将其返回到已实现的main函数调用中,然后在函数调用之后执行语句。当前数据存储在一个状态中,但是由于状态需要时间来更改早执行的return语句,并且我为null,但是当我第二次按下不透明按钮时,数据是正确的,因为它的先前状态已更改。 我尝试了全局并让变量,但在回调函数结束后它们被销毁了。

简而言之,我只想将此结果返回到主屏幕中的facebookLogin。

我是React Native的新手,所以如果有任何帮助,我将不胜感激。

0 个答案:

没有答案