Reagieren Native FBSDK onLoginFinished Push auf neuen Bildschirm

Question

Ich bin etwas neu zu verwenden native reagieren und ich versuche, Facebook Login mit meiner App mit der Reaktion native fbsdk zu implementieren.

Ich habe es an den Punkt gebracht, wo es um Berechtigungen aus dem Facebook-Profil des Benutzers fragen wird, dann zurück zur App mit einer Erfolgsmeldung. Anstatt die Warnung onLoginFinished anzuzeigen, möchte ich auf einen neuen Bildschirm wechseln.

Dies ist mein Login-Button-Code in der Haupt Konstruktor Klasse:

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', 
}); 
} 

Aber nach dem Erfolg Warnungen angezeigt werden, ist es nicht auf die neue Seite schieben. Es scheint so zu sein, dass.props.navigator in meiner Login-Klasse nicht erkannt wird und ich bin mir nicht sicher warum. Jede mögliche Hilfe würde sehr geschätzt werden

Answer 1

Stellt sich heraus das Problem war, dass ich die Login-Klasse in meinem Konstruktor deklarierte. Durch Verschieben in eine componentWillMount-Funktion wurde es für mich repariert!

Answer 2

Momentan rufen Sie die goToNewpage() -Methode fälschlicherweise als Ergebnisblock der LoginButton-Komponente auf und in jeder Art von Block können wir nicht direkt auf die aktuelle Klassenreferenz "this" zugreifen, da sie ihre Erreichbarkeit verliert.

Dann sollten Sie eine globale Variable für diese Komponente als

var _this schaffen;

und Stromreferenz der Klasse zuweisen in Komponente Konstruktor wie:

_this = this;

und verwenden Sie _this.props.navigator.push anstelle von this.props.navigator.push innerhalb Ihrer goToNewpage() -Methode. Vielen Dank!