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页面的实际导航从未发生，它只是停留在我注销的屏幕上。谢谢您的帮助。

更新

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

更新

我认为我对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

的更新，

    var p1 = document.querySelector(".playerOne");
    var p2 = document.querySelector(".playerTwo");
    var p1Display = document.querySelector("#p1Span");
    var p2Display = document.querySelector("#p2Span");
    var header = document.querySelector("h1");
    var reset = document.querySelector(".reset");
    //var input = document.getElementsByTagName("input");
    var until = document.getElementsByClassName(".until");
    var p1Score = 0;
    var p2Score = 0;
    var gameOver = false;
    var max = 5;
    
    p1.addEventListener("click", function() {
        if (!gameOver) {
            p1Score++;
            p1Display.textContent = p1Score;
            header.textContent = (p1Score + " to " + p2Score);
        } 
        if (p1Score === max) {
            p1Display.classList.add("winner");
            gameOver = true;
        }
    });
    p2.addEventListener("click", function() {
        if (!gameOver) {
            p2Score++;
            p2Display.textContent = p2Score;
            header.textContent = (p1Score + " to " + p2Score);
        } 
        if (p2Score === max) {
            p2Display.classList.add("winner");
            gameOver = true;
        }
    });
    reset.addEventListener("click", function() {
        gameOver = false;
        p1Score = 0;
        p2Score = 0;
        p1Display.classList.remove("winner");
        p2Display.classList.remove("winner");
        header.textContent = (p1Score + " to " + p2Score);
    });

的最新更新和其他错误正在传播

如果您使用的是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'}
    }
};

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

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

2 个答案: