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

Question

我正在尝试注销我的firebase用户，并且在我用来注销的图标的onPress中，我具有一个函数，该函数执行命令以导航回登录屏幕。 使用firebase.auth.signOut登出成功，我得到的是红色屏幕：

这是我的相关代码：

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)});
}

没有错误被捕获，只有红色屏幕。 据我所知错误是来自navigate调用的-到LogIn页面的实际导航从未发生，它只是停留在我注销的屏幕上。 任何帮助表示赞赏，谢谢。

UPDATE

我认为这与在navigationOptions的onPress内部使用this有关-可能是因为this是指它所位于的组件外部的作用域？ 我this如何使用呢？ 当我注释掉const { navigate } ... this.props.navigation const { navigate } ... ，错误消失了，所以它与我相信的this.props.navigation （并且与this ？）。

UPDATE

我认为我对this关键字是正确的，以下代码会产生错误：

....

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);
                //})
            }}
      />
    ),

....

错误是： undefined is not an object (evaluating '_this4.props.navigation')

Answer 1

由于最近的更新https://github.com/react-navigation/react-navigation/releases ，所以最近进行了更新以react-navigation与其他循环错误。

如果您使用的是2.12.0版，建议将其降级到2.11.2，直到修复错误为止。

Answer 2

这工作：

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'}
    }
};

我必须使用与navigationOptions一起传递的navigation方法来进行导航。