无法导航到新屏幕反应本机收到错误未定义对象 navigate.navigation

Question

无法导航到新屏幕 React Native 出现错误：

TypeError: undefined 不是对象（正在计算 'navigation.navigate'）

谁能解释一下我哪里出错了？下面是我正在使用的代码。

const MessagesScreen = ({navigation}) => {
        return (
          <Container>
            <FlatList 
              data={Messages}
              keyExtractor={item=>item.id}
              renderItem={({item}) => (
                <Card onPress={() => navigation.navigate('Chat', {userName: item.userName})}>
                  <UserInfo>
                    <UserImgWrapper>
                      <UserImg source={item.userImg} />
                    </UserImgWrapper>
                    <TextSection>
                      <UserInfoText>
                        <UserName>{item.userName}</UserName>
                        <PostTime>{item.messageTime}</PostTime>
                      </UserInfoText>
                      <MessageText>{item.messageText}</MessageText>
                    </TextSection>
                  </UserInfo>
                </Card>
              )}
            />
          </Container>
        );
    };

export default MessagesScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center'
  },
});

Answer 1

您似乎忘记在导航器堆栈中声明您的屏幕。像这样

<Stack.Screen 
           name="MessagesScreen" 
           component={MessagesScreen} />

这是来自官方页面的示例 react navigation v5

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

无法导航到新屏幕反应本机收到错误未定义对象 navigate.navigation

Unable to navigate to new screen react native getting an error undefined Object navigate.navigation

react-native

react-navigation