React Native FBSDK onLoginFinished 推送到新屏幕

Question

我对使用 react native 有点陌生，我正在尝试使用 react native fbsdk 通过我的应用程序实现 Facebook 登录。

我已经知道它会向用户的 Facebook 个人资料请求权限，然后 return 向应用程序发送一条成功警报消息。我不想在 LoginFinished 上显示警报，而是想推送到一个新屏幕。

这是我在主构造函数中的登录按钮代码class：

constructor(props){
 super(props);
 this.goToNewPage = this.goToNewPage.bind(this);
 const infoRequest = new GraphRequest(
  '/me',
  {parameters: {
          fields: {
            string: 'email,first_name,last_name,id,gender' // what you want to get
          }
  }},
  this._responseInfoCallback,
 );
 Login = React.createClass({
  render: function() {
    return (
      <View >
        <LoginButton
          navigator={this.props.navigator}
          style = {{marginLeft:55, marginRight:55, height:50, width:300}}

          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("Login failed with error: " + result.error);
              } else if (result.isCancelled) {
                alert("Login was cancelled");
              } else {
                alert("Login was successful with permissions: " + result.grantedPermissions)
                new GraphRequestManager().addRequest(infoRequest).start();
                this.goToNewPage;

              }
            }
          }
          onLogoutFinished={() => alert("User logged out")}
          />
      </View>
    );
  }
 });
} //closes constructor 

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

goToNewPage(){
console.log("Hello from go to new page function");
this.props.navigator.push({
  id: 'newPage',
  name: 'Going To New Page',
});
}

但是显示成功提示后，并没有推送到新页面。我的登录 class 似乎无法识别 this.props.navigator，我不确定为什么。任何帮助都将不胜感激

Answer 1

原来问题是我在我的构造函数中声明了登录 class。将它移动到 componentWillMount 函数为我修复了它！

Answer 2

目前您错误地调用了 goToNewpage() 方法，LoginButton 组件的结果块以及在任何类型的块中我们都无法直接访问当前 class 引用 "this"，因为它失去了可达性.

那么你应该为这个组件创建一个全局变量作为

var _this;

并在组件构造函数中分配 class 的当前引用，例如：

_this = 这个；

并且应该在 goToNewpage() 方法中使用 _this.props.navigator.push 代替 this.props.navigator.push。谢谢！

React Native FBSDK onLoginFinished 推送到新屏幕

React Native FBSDK onLoginFinished push to new screen

reactjs

mobile

react-native

facebook-javascript-sdk

fbsdk