React-Native中props.navigation未定义错误求助（附代码）

Hey there! Let's work through this navigation error you're hitting after Facebook login. The problem boils down to two key issues: incorrect this context in your login function, and a wrong way to call the navigation method.

Here's what's going wrong: #

1. this context isn't bound to your component
   Your fbAuthFunction uses regular function declarations (function(result) { ... }) inside the promise chain. This changes the value of this inside those functions, making it point to the function itself instead of your LoginScreen component. That's why this.props is undefined.

2. Incorrect navigation method call
   You're trying to navigate with this.props.navigation("profile"), but the correct method to navigate to a screen is this.props.navigation.navigate("profile").

3. Unbound function in onPress
   The onPress={this.fbAuthFunction} in your TouchableOpacity doesn't bind this to the component, so when the button is pressed, this inside fbAuthFunction won't reference the component instance.

Here's the fixed LoginScreen.js code: #

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity, } from 'react-native';
import FBSDK, { LoginManager, AccessToken } from 'react-native-fbsdk';
import firebase from 'firebase';

type Props = {};
export default class LoginScreen extends Component<Props> {
  // Use arrow function for fbAuthFunction to preserve component context
  fbAuthFunction = () => {
    LoginManager.logInWithReadPermissions(['public_profile','email']).then((result) => {
      if(result.isCancelled) {
        alert('Login foi cancelado !');
      } else {
        console.log('Login efetuado com sucesso !');
        AccessToken.getCurrentAccessToken().then((accessTokenData) => {
          const credential = firebase.auth.FacebookAuthProvider.credential(accessTokenData.accessToken)
          firebase.auth().signInAndRetrieveDataWithCredential(credential).then((result) => {
            // Correct navigation method to jump to ProfileScreen
            this.props.navigation.navigate("profile");
          }, (error) => {
            console.log('Erro: '+error);
          })
        }, (error) => {
          console.log('Erro: '+error);
        })
      }
    }, (error) => {
      console.log('Erro: '+error);
    })
  }

  render() {
    return (
      <View style={styles.container}>
        {/* onPress works directly now since fbAuthFunction uses arrow function */}
        <TouchableOpacity style={styles.button} onPress={this.fbAuthFunction}>
          <Text style={styles.button_text}>Login with Facebook</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

// Add your styles back in (I included a basic set for reference)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    backgroundColor: '#4267B2',
    borderRadius: 4,
  },
  button_text: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
});

Key changes made: #

• Converted fbAuthFunction to an arrow function class property to keep this pointing to the component instance.
• Replaced all regular function callbacks in the promise chain with arrow functions so this remains consistent throughout the async flow.
• Fixed the navigation call to use this.props.navigation.navigate("profile") instead of the incorrect direct function call.

If you prefer not to use arrow function class properties, you can bind this in the constructor instead:

constructor(props) {
  super(props);
  this.fbAuthFunction = this.fbAuthFunction.bind(this);
}

// Keep fbAuthFunction as a regular function, but still use arrow functions inside the promise chain
fbAuthFunction() {
  LoginManager.logInWithReadPermissions(['public_profile','email']).then((result) => {
    // ... rest of the code with arrow functions for callbacks
  })
}

This should resolve the undefined is not an object error and let you navigate to the ProfileScreen after a successful login.

内容的提问来源于stack exchange，提问作者Fabio Freitas