Facebook 登录后无法让 React 本机应用程序导航到主屏幕

Question

我正在制作一个反应本机应用程序，用户使用 Facebook 登录，然后转到他们的主页，其中包含应用程序的更多详细信息，我无法让应用程序在成功登录 Facebook 后导航到主页。

我正在使用 React Navigator。我已经在 Whosebug 上搜索了 3 天，但没有成功...

如有任何帮助，我们将不胜感激

使用常规按钮成功导航主页如上所示，但在facebook认证后不会

//index.js

import React, {
  Component
} from 'react';
import {
  Platform,
  StyleSheet,
  Image,
  Button,
  Slider,
  Text,
  View,
  Dimensions
} from 'react-native';
import FBLoginButton from '../FBLoginButton';
import {
  SliderBox
} from 'react-native-image-slider-box';
import {
  SafeAreaView
} from 'react-navigation';
import A from 'react-native-a'
import {
  NavigationActions,
  StackActions
} from 'react-navigation';
import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
//import App from '../App';
const FBSDK = require('react-native-fbsdk');
const {
  LoginManager,
} = FBSDK;

let isLoggedIn = false



type Props = {};
export default class Login extends Component < Props > {


  constructor(props) {
    //this._loginAuth = this._loginAuth.bind(this)

    super(props);
    this.state = {
      images: [
        'https://hluhluwegamereserve.com/wp-content/uploads/2014/03/IMG_1579.jpg',
        'https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/04/26/09/giraffe.jpg',


      ]
    };


  }

  //this.props.navigation.push('Home')


  render() {
    LoginManager.logInWithReadPermissions(['public_profile']).then(
      function(result) {
        if (result.isCancelled) {
          alert('Login was cancelled');
        } else {
          alert('Login was successful with permissions: ' + result.grantedPermissions.toString());
          //this.props.navigation.push('Home')
          //this.props.navigation.navigate("Home")

          //this._loginAuth()
        }
      },
      function(error) {
        alert('Login failed with error: ' + error);
      }
    );


    //alert(this.state.loggedIn)


    return (


      <
      View style = {
        styles.container
      } >

      <
      SliderBox style = {
        styles.slider
      }
      images = {
        this.state.images
      }
      sliderBoxHeight = {
        '100%'
      }
      paginationBoxVerticalPadding = {
        0
      }
      //parentWidth={400}

      />

      <
      Button onPress = {
        () => this.props.navigation.navigate('Home')
      }
      title = "Go to Home"
      color = "#841584" /
      >


      <
      FBLoginButton onload = {
        () => this.props.navigation.navigate('Home')
      }
      style = {
        styles.welcome
      } >

      <
      /FBLoginButton>

      <
      Text style = {
        styles.instructions
      } >

      <
      /Text>

      <
      /View>


    );
  }
}
if (this.isLoggedIn) {
  this.props.navigation.navigate('Home')
}


// ...

// Attempt a login using the Facebook login dialog,
// asking for default permissions.



const styles = StyleSheet.create({
  container: {
    flex: 1,
    //padding: 40,
    //marginBottom: 250,
    justifyContent: 'center',
    alignItems: 'center',
    //marginTop: '15%',
    paddingTop: '15%',
    paddingBottom: '15%',
    resizeMode: 'contain',
  },
  slider: {
    //width: '100%',
    //alignSelf: 'flex-start',
    //width: this.deviceWidth,
    resizeMode: 'contain',
  },
  welcome: {
    fontSize: 12,
    textAlign: 'center',
    marginBottom: '10%',
    padding: '5%',
    //paddingTop: 40,
  },
  terms: {
    fontSize: 12,
    color: 'blue',
    textAlign: 'center',
    margin: 1,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    //marginBottom: 5,
  },
  safeArea: {
    backgroundColor: '#ddd'
  },
});

这是我的 App.Js

//App.js

/*
 * @format
 * @flow
 */

import React, {
  Component
} from 'react';
import {
  Platform,
  StyleSheet,
  Image,
  Button,
  Slider,
  Text,
  View,
  Dimensions
} from 'react-native';
import A from 'react-native-a'
import {
  NavigationActions,
  StackActions
} from 'react-navigation';
import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import Login from './screens/Login';
import {
  StackNavigator
} from "react-navigation";
import FBLoginButton from './FBLoginButton'




type Props = {};
//Login Screen
const NavigationApp = createStackNavigator({
  Login: Login,
  Home: HomeScreen

}, {
  initialRouteName: "Login"
});

class App extends Component < Props > {

  constructor(props) {


    super(props);

  }


  render() {

    return (
      //Empty View For App.js
      <
      View >
      <
      /View>


    );
  }
}

//Navagation Goes To Login.js For Default


export default createAppContainer(NavigationApp);

Answer 1

与其在 class 之外的代码中执行 if-statement，不如执行以下操作：

一旦您 logged-in，Facebook 的登录管理器将返回 Promise
然后将检查承诺。所以，如果你有

.then((result) => {
   if(result) {
      this.props.navigation.navigate('HomeScreen');
   } else {
      alert('...'); // Anything you want to do if login failed.
   }
});

Answer 2

我用过

FBLogout = (accessToken) => {
  let logout =
      new GraphRequest(
          "me/permissions/",
          {
              accessToken: accessToken,
              httpMethod: 'DELETE'
          },
          (error, result) => {
              if (error) {
                  console.log('Error fetching data: ' + error.toString());
              } else {
                  LoginManager.logOut();
              }
          });
  new GraphRequestManager().addRequest(logout).start();
  };

并添加了一个按钮并使用了

LoginManager.logout();

<View style={styles.container}>
  <SettingsView profile={this.state.profile}/>
  <Button
    onPress={() => {
      FBLogout();
      this.props.navigation.navigate('HomeScreen')
    }}
    title="Log Out"
    color="#3b5998"
  />
</View>

Facebook 登录后无法让 React 本机应用程序导航到主屏幕

Cant get React native app to navigate to homescreen after facebook login

react-native

react-navigation

react-native-fbsdk

react-navigation-stack