react-native - 无法导航到新屏幕反应原生收到错误未定义对象导航.导航

Question

无法导航到新屏幕反应本机收到错误：

TypeError：未定义不是一个对象（评估'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'
  },
});

标签： react-nativereact-navigation

Answer 1

您似乎忘记在 Navigator 堆栈中声明您的屏幕。像这样的东西

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

这是来自官方页面的示例，带有 反应导航 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;