react-native - 从 FlatList 组件向屏幕传递数据

Question

我创建了一个名为 AchievementBlock 的自定义组件，如下所示:

import React from 'react';
import { View, StyleSheet, Image, TouchableOpacity } from 'react-native';

const AchievementBlock = ({ onPress }) => {
    return (
        <TouchableOpacity onPress={onPress}>
            <View style={styles.AchievmentBlockStyle}>
                <Image source={require('../../assets/images/Placeholder_Achievement.png')} />
            </View>
        </TouchableOpacity>
    )
}

然后将该组件用作我的 UserProfileScreen 中的 FlatList，并具有以下数据:

const tournaments = [
    { title: 'Tournament Title #1', placement: '2nd', desc: 'Description Here', logo: require('../../assets/images/TournamentLogo.png') },
    { title: 'Tournament Title #2', placement: '1st', desc: 'Description Here', logo: require('../../assets/images/TournamentLogo.png') },
    { title: 'Tournament Title #3', placement: '3rd', desc: 'Description Here', logo: require('../../assets/images/TournamentLogo.png') },
]

然后我返回如下:

return (
<View style={styles.container}>
<FlatList
 data={tournaments}
 numColumns={3}
 keyExtractor={(tournaments) => {tournaments.title}}
 renderItem={({ item }) => {
   return (
   <AchievementBlock
   title={item.title}
   placement={item.placement}
   onPress={() => navigation.navigate('Achievement')}/>
   )
 }}                        
 />
</View>
)

现在，我一直坚持在单击时将每个呈现的 FlatList 项目的数据拉到新屏幕。

新闻界应该是这样的:

onPress={() => navigation.navigate('Achievement', {item.title, item.placement, item.logo, item.desc})}

但这行不通，而且我仍然是 React Native 的初学者，我似乎无法找到使用 navigation.getParam() 函数正常将每个项目数据拉到该屏幕的解决方案。

我做错了什么，我将如何在最佳实践中实现这一点？

Answer 1

你走在正确的道路上，因为 React Navigation v5 使用了这个函数 导航.导航

但是，您在 params 参数中传递 item 的键/值的方式不正确。

尝试用下面的解构

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

如果您打算设置键/值，则显式传递键

onPress={
  () => navigation.navigate('Achievement', { 
    title: item.title,
    logo: item.logo,
    placement: item.placement,
    desc: item.desc
  })
}