this.props.navigation.navigate() 不工作

Question

我希望应用程序检查是否有用户登录（firebase 身份验证）。 如果有，导航到一个页面（反应导航 v5），如果没有，导航到另一个页面。

我有以下代码：

在 App.js 中

//import navigation + screens

const Stack = createStackNavigator();
const MaterialBottomTabs = createMaterialBottomTabNavigator();

class App extends React.Component {

    AuthStack = () => {
      <Stack.Navigator>
        <Stack.Screen name="login" component={LoginScreen} />
        <Stack.Screen name="register" component={RegisterScreen} />
      </Stack.Navigator>
    }

createBottomTabs = () => {
      return <MaterialBottomTabs.Navigator>
          <MaterialBottomTabs.Screen name="first" component={firstScreen} />
          <MaterialBottomTabs.Screen name="second" component={secondScreen} />
        </MaterialBottomTabs.Navigator>
    }
render(){
      return(
        <LoadingScreen />
      )
    }
}

export default App;

在 Loading.js 中

import React from "react";
import { Text, SafeAreaView } from "react-native";
import * as firebase from "firebase";
import {AuthStack, createBottomTabs} from "./App.js";

class LoadingScreen extends React.Component {

  componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      this.props.navigation.navigate(user ? createBottomTabs : AuthStack);
    });
  }
  render() {
    return (
      <SafeAreaView>
        <Text>
          Waiting...
        </Text>
      </SafeAreaView>
    );
  }
}

export default LoadingScreen;

我收到一条错误消息：

TypeError: undefined is not an object（评估'_this.props.navigation.navigate'）

Answer 1

navigation道具不会传递给所有组件，只有屏幕组件会自动接收此道具，但是，如果您希望在任何组件中访问导航道具，则可以使用useNavigation钩子。

这是文档中的一个示例

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}