React Native Error undefined 不是一个对象（评估“navigation.push”）

Question

单击 MainMenu.js 文件中的按钮后，我想导航到 List.js，但它始终显示此错误：

TypeError: undefined is not an object (evaluating 'navigation.push')

这是我的 App.js 文件

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { List } from './List';
import { MainMenu } from './MainMenu';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to stassrt working on your app!</Text>
      <StatusBar style="auto" />
      <MainMenu></MainMenu>
    </View>
  );
}

这是我的 MainMenu.js 文件（我在这个文件中有按钮）：

import React from 'react';
import { Text, Button, View, StyleSheet } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { List } from './List';
import { useNavigation } from '@react-navigation/core';


export const MainMenu = ({navigation}) => (
    
    <View>
      <Text>Hello HOW ARE YsOU</Text>
      <Button title="Click" onPress={() => navigation.push("List")}></Button>
    </View>
    
);

Answer 1

在您的MainMenu组件中，您需要一个带有键navigation的对象作为道具。 但是，您没有将任何道具传递给MainMenu ，因此道具未定义，但您期望的是一个对象。 要解决此问题，请将组件更改为：

import React from 'react';
import { Text, Button, View, StyleSheet } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { List } from './List';
import { useNavigation } from '@react-navigation/core';


export const MainMenu = () => {
    const navigation = useNavigation()
    return (
      <View>
        <Text>Hello HOW ARE YsOU</Text>
        <Button title="Click" onPress={() => navigation.push("List")}> 
        </Button>
      </View>
    ); 
};

我们使用的是钩子，而不是道具。

Answer 2

我不知道你是如何实现堆栈导航器的，但我认为你的 App.js 文件应该是这样的：

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { List } from './List';
import { MainMenu } from './MainMenu';

const Stack = createStackNavigator();

export default function App() {
return (
   <NavigationContainer>
     <Stack.Navigator>
        <>
         <Stack.Screen name="Main Menu" component={MainMenu} />
         <Stack.Screen name="List" component={List} />
       </>
    </Stack.Navigator>
  </NavigationContainer>
 );
}

我认为您的 MainMenu 组件应如下所示：

import React from 'react';
import { Text, Button, View, StyleSheet } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { List } from './List';

export const MainMenu = ({navigation}) => (
  <View style={styles.container}>
    <Text>Open up App.js to stassrt working on your app!</Text>
    <StatusBar style="auto" />
    <View>
     <Text>Hello HOW ARE YsOU</Text>
     <Button title="Click" onPress={() => navigation.navigate("List")</Button>      
    </View>
  </View>