React native 从平面列表组件向屏幕传递数据

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

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

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

然后我返回如下：

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

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

但这不起作用，而且我还是React Native的初学者，似乎找不到解决方案，无法正常使用navigation.getParam（）函数将每个项目的数据拉到屏幕上

---

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

当

React导航

v5使用该功能时，您走的是正确的道路 导航

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

试着用以下方法解构

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

如果要设置键/值，请显式传入键

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

---

通过导航传递数据

export const Achievement = ({route}) => {
   const name = route.params.name;
   const logo = route.params.logo;
}

您可以通过导航传递数据，如下所示

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

访问下一屏幕中的数据

export const Achievement = ({route}) => {
   const name = route.params.name;
   const logo = route.params.logo;
}

---

用下面的

{…item}

解构项目，例如

导航（'Achatization'，{…item}）

谢谢@denis-非常感谢这项工作，似乎我已经接近解构并将其传递下去了。