Question

我如何在React Native FaceBook中使用此代码获取用户名和个人资料图片。

我已经在主要的App组件中使用LoginManager来验证用户身份。

组件：

export default class App extends Component {

 componentDidMount() {

 LoginManager.logInWithReadPermissions(['public_profile']).then(
      function(result) {    
        if (result.isCancelled) {    
          console.log('Login cancelled');    
        } else {    
          console.log('Login success with permissions: ' +    
              result.grantedPermissions.toString()    
          );    
        }    
      }
    );    
  }

下面的渲染功能将在登录后执行操作

渲染功能：

render() {
return (
  <View style={styles.container}>
    <LoginButton publishPermissions={['publish_actions']}
      onLoginFinished={(error, result) => {
        if (error) {
          console.log('login has error: ' + result.error);
        } else {
          AccessToken.getCurrentAccessToken().then(data => {
            console.log(data.accessToken.toString());
          });
        }
      }}
    />
  </View>
    );    
  }    
}

有人可以帮助我使用React Native FaceBook中的此代码段登录用户名和个人资料图片吗？

Answer 1

最终我正在使用此代码，并且可以正常工作 我在App.js类中称呼它

componentDidMount() {
  let currentComponent = this;

LoginManager.logInWithReadPermissions(['public_profile']).then(
  function(result) {
    if (result.isCancelled) {
      console.log('Login cancelled');
    } else {
      AccessToken
      .getCurrentAccessToken()
      .then((user) => {
          // alert("Facebook accessToken:\n" + user.accessToken + "\n\naccessTokenSource: " + user.accessTokenSource + "\n\nuserID: " + user.userID)
          console.log(user);
          return user
      })
      .then((user) => {
          const responseInfoCallback = (error, result) => {
              if (error) {
                  console.log(error)
                  alert('Error fetching data: ' + error.toString());
              } else {                                        
                console.log(result)
                  // alert('id: ' + result.id + 
                  //       '\n\nname: ' + result.name + 
                  //       '\n\nfirst_name: ' + result.first_name + 
                  //       '\n\nlast_name: ' + result.last_name +
                  //        '\n\nemail: ' + result.email);
                  // currentComponent.setState({ Username: result.name  , UserId: result.picture.data.url});
                  currentComponent.props.navigation.navigate('App' , { Username: result.name , UserId: result.picture.data.url});                            
                     }
          }
          const infoRequest = new GraphRequest('/me', {
              accessToken: user.accessToken,
              parameters: {
                  fields: {
                      string: 'email,name,first_name,last_name , picture.type(large)'
                  }
              }
          }, responseInfoCallback);

          // Start the graph request.
          new GraphRequestManager()
              .addRequest(infoRequest)
              .start()
      })
    }
  },
  function(error) {
    console.log('Login fail with error: ' + error);
  }
);

}

如何在React Native FaceBook中使用此代码获取用户名和个人资料图片

1 个答案: