0

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.

Antwort

0

Speichern Sie die Benutzerdetails im asyncstorage, danach können Sie von jedem Bildschirm aus darauf zugreifen. Sie können weitere Details finden Sie hier https://facebook.github.io/react-native/docs/asyncstorage.html

+0

okay, so würde ich die 'erwarten AsyncStorage.setItem' in der const responseInfoCallback oder in der 'const infoRequest'? –

+0

Ich bin nicht vertraut mit Graph API, verwenden Sie einfach das, wo Sie die Benutzerdetails drucken AsyncStorage.setItem ('userData', JSON.stringify (userDetails)); –

Verwandte Themen