navigation（）抛出错误-反应本机

Question

I am trying to sign out my firebase user, and in the onPress of the icon I am using to sign out I have a function that executes a command to navigate back to the login screen. The logout with firebase.auth.signOut is successful, I just get this red screen:

Here is my relevant code:

static navigationOptions = {
    headerTitle: 'Inventory Control',
    headerLeft: null,
    headerRight: (
      <Icon name={'exit-to-app'}
            onPress={() => { firebase.auth().signOut()
                              .then(() => { 
                                  this.leave();
                              })
                              .catch(err => {
                                Alert.alert(err);
                              })
                           } 
                    }
      />
    ),
    headerTitleStyle: {textAlign: 'center', flex: 1, backgroundColor: '#ddeaff', color: '#518dff', fontFamily: 'American Typewriter', fontWeight: 'bold', fontSize: 20},
    headerStyle: {backgroundColor: '#ddeaff'}
};

leave = () => {
    const { navigate } = this.props.navigation;
    navigate('LogIn').catch(err => {Alert.alert(err)});
}

No errors are caught, just the red screen. As far as I can tell the error is coming from the navigate call - the actual navigation to the LogIn page never happens, it just stays on the screen that I logged out on. Any help is appreciated, thanks.

UPDATE

I think it has something to do with using this inside the onPress inside the navigationOptions - possibly because this is referring to a scope outside of the component that it is in? How do I handle using this ? When I comment out const { navigate } ... the error goes away, so it has something to do with this.props.navigation I believe (and this ?).

UPDATE

I think I am correct about the this keyword, the below code produces an error:

....

headerRight: (
      <Icon name={'exit-to-app'}
            onPress={() => {
              //firebase.auth().signOut()
                //.then(() => { 
                  const { navigate } = this.props.navigation;
                  navigate('LogIn').catch(err => {Alert.alert(err)});
                //})
                //.catch(err => {
                  //Alert.alert(err);
                //})
            }}
      />
    ),

....

The error is: undefined is not an object (evaluating '_this4.props.navigation')

Answer 1

There's been a recent update to react-navigation with other errors circulating, due to the recent update https://github.com/react-navigation/react-navigation/releases

If you are using version 2.12.0 I suggest downgrading to 2.11.2 , till bugs are fixed.

Answer 2

This worked:

static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Inventory Control',
      headerLeft: null,
      headerRight: (
        <Icon name={'exit-to-app'}
              onPress={() => {
                firebase.auth().signOut()
                  .then(() => { 
                    //const { navigate } = this.props.navigation;
                    //Alert.alert(Object.keys(navigation));
                    navigation.navigate('LogIn');
                  })
                  .catch(err => {
                    Alert.alert(err);
                  })
              }}
        />
      ),
      headerTitleStyle: {textAlign: 'center', flex: 1, backgroundColor: '#ddeaff', color: '#518dff', fontFamily: 'American Typewriter', fontWeight: 'bold', fontSize: 20},
      headerStyle: {backgroundColor: '#ddeaff'}
    }
};

I had to use the navigation method that gets passed with navigationOptions to make the navigation.