Ich mache eine native iOS-App mit einem Facebook-Login reagieren und muss jetzt die Ergebnisdaten auf allen anderen Bildschirmen abrufen.reagieren nativ. Facebook-Login-Ergebnis auf allen Bildschirmen abrufen
i'v bekam Baum Bildschirme:
- Login.js
- Profile.js
- main.js
Anmeldung enthält die loginButton Hexe arbeitet und gibt die Benutzer public_profile in die Konsole.
Haupt enthält eine stacknavigator und importiert die anderen Bildschirme
Profil ist, wo ich möchte der angemeldete Benutzer Namen auszudrucken, img ect.
Die Frage ist, wenn onLoginFinished ein Erfolg ist, gibt es die Benutzerinformationen im Ergebnis zurück, aber wie greife ich es auf den anderen Bildschirmen?
Es sieht so aus, als wäre es der GraphRequestManager und InfoRequest, die ich brauche, kann aber nicht herausfinden, wie es geht.
main.js
'use-strict';
var React = require('react');
window.React = React;
import {AppRegistry, Text} from 'react-native';
import { StackNavigator } from 'react-navigation';
//login screen
import Login from './Login'
//profile screen
var Profile = require('./Profile.js');
const skatebayApp = StackNavigator({
Login: {screen: Login},
Profile: {screen: Profile},
},{
headerMode: 'screen',
});
AppRegistry.registerComponent('skatebayApp',() => skatebayApp);
Login.js
'use-strict';
import React, { Component } from 'react';
import {
Text,
View,
TouchableHighlight,
Image,
} from 'react-native';
const FBSDK = require('react-native-fbsdk');
const {
LoginButton,
AccessToken,
GraphRequest,
GraphRequestManager,
} = FBSDK;
export default class Login extends Component{
render(){
return(
<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
const responseInfoCallback = (error, result) => {
if (error) {
console.log(error)
alert('Error fetching data: ' + error.toString());
} else {
console.log(result)
}
}
const infoRequest = new GraphRequest(
'/me',
{
accessToken: accessToken,
parameters: {
fields: {
string: 'email,name,first_name,last_name,picture'
}
}
},
responseInfoCallback,
console.log(result)
);
new GraphRequestManager().addRequest(infoRequest).start()
})
}
}
} onLogoutFinished={() => console.log('signed out')}/>
);
}
}
Profile.js - das ist, wo ich möchte das der Benutzer Informationen packen und es ausdrucken
'use-strict';
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
Image,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class Profile extends React.Component {
render() {
return (
<View>
<Text>Username & other info here</Text>
</View>
);
}
}
module.exports = Profile;
Ich hoffe, es macht Sinn, ich bin ziemlich neu zu reagieren native.
okay, so würde ich die 'erwarten AsyncStorage.setItem' in der const responseInfoCallback oder in der 'const infoRequest'? –
Ich bin nicht vertraut mit Graph API, verwenden Sie einfach das, wo Sie die Benutzerdetails drucken AsyncStorage.setItem ('userData', JSON.stringify (userDetails)); –