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>