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;

我收到一条错误消息：

类型错误：未定义不是对象（评估“_this.props.navigation.navigate”）

Answer 1

该navigationprop 不会传递到所有组件中，只有屏幕组件会自动接收该 prop！但是，如果您希望访问任何组件中的 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();
      }}
    />
  );
}