react-native - 使用对象作为参数调用导航时，您需要指定名称或键

Question

我有一个消息屏幕，我需要在点击消息列表项时导航到“单个消息”，但我收到此错误 "you need to specify name or key when calling navigate with an object as the argument"我已经创建了“单个消息”屏幕并将其添加为 ，但我不知道我做错了什么。
下面是我的代码:

function MessagesScreen({navigation}) {
    const [messages, setMessages] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    
    const loadMessages = async () => {
        const response = await messagesApi.getMessages();
        setMessages(response.data);
    }

    useEffect(() => {
            loadMessages();
        }, []);

    const handleDelete = message => {

        setMessages(messages.filter((m) => m.id !== message.id));
    }
    
    return (
        <Screen>
            <FlatList
                data={messages}
                keyExtractor={message => message.id.toString()}
                renderItem={({ item }) => 
                    <ListItem 
                    title={item.fromUserId}
                    subTitle={item.content}
                    image={item.image}
                    onPress={() => navigation.navigate(routes.MESSAGE_SINGLE, item)}
                    renderRightActions={() => 
                        <ListItemDeleteAction onPress={() => handleDelete(item)} />}
                    /> 
                    }
                ItemSeparatorComponent={ListItemSeparator}
                refreshing={refreshing}
                onRefresh={() => {
                    setMessages([
                        {
                            id: 1,
                            title: 'T1',
                            description: 'D1',
                            image: require('../assets/mosh.jpg')
                        },
                    ])
                    //setMessages(loadMessages());
                }}
                />
        </Screen>
    );
}

const styles = StyleSheet.create({
    
})

export default MessagesScreen;

当我像这样在控制台上记录“onPress”事件时:

onPress={() => console.log('message selected', item)}

这是我得到的:

下面是我为呈现消息而创建的 MessageSingle 屏幕，但我不知道该怎么做。

function MessageSingle() {


  return (
    
    <Screen>
      <View style={styles.container}>
          <AppText>{"kjhkjhjk"}</AppText>
          {/* <AppText>{getMessagesApi}</AppText> */}
      </View>
    </Screen>
        
  );
}

const styles = StyleSheet.create({
  container: {}
});

export default MessageSingle;

所以我想从消息列表中获取消息。也许我不必创建单独的屏幕？我是这方面的初学者
任何帮助，将不胜感激!

Answer 1

您需要先添加您的 MessageSingle组件到导航容器。只需将其作为您 MessagesScreen 的屏幕之一即可零件。然后您需要使用该名称导航到它:

onPress={() => navigation.navigate('MessageSingle', {item})}

以上将导航到名称为 MessageSingle 的屏幕, 并传递对象 item作为参数。
为了在您的 MessageSingle 中访问它组件，您需要使用 route Prop 。

function MessageSingle({route}) {

console.log('item = ', route.params?.item); // this would be your item. 

  return (
    
    <Screen>
      <View style={styles.container}>
          <AppText>{"kjhkjhjk"}</AppText>
          {/* <AppText>{getMessagesApi}</AppText> */}
      </View>
    </Screen>
        
  );
}