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

Question

我希望应用检查是否有用户登录（firebase 身份验证）。如果有，导航到一个页面（react navigation 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 (evaluating '_this.props.navigation.navigate')

Answer 1

navigation prop 并没有传递到所有组件中，只有屏幕组件自动接收此 prop！但是，如果您希望在任何组件中访问导航道具，您可以使用 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();
      }}
    />
  );
}

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

this.props.navigation.navigate() not working

javascript

react-native

firebase-authentication

react-navigation-v5