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

Question

我有一个消息屏幕，当点击消息列表项时我需要导航到“单个消息”，但我收到此错误"you need to specify name or key when calling navigate with an object as the argument"

我已经创建了“单个消息”屏幕并将其添加为 <Stack.Screen/> ，但我不知道我做错了什么。

下面是我的代码：

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组件中访问它，您需要使用routeprops。

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>
        
  );
}