从 FlatList 组件向屏幕传递数据答案

【问题标题】：Passing Data to Screen from FlatList Component从 FlatList 组件向屏幕传递数据
【发布时间】：2020-11-22 15:24:01
【问题描述】：

我创建了一个名为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() 函数正常地将每个项目数据拉到该屏幕。

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

【问题讨论】：

使用以下{ ...item } 解构项目，例如navigation.navigate('Achievement', { ...item})

标签： react-native react-navigation react-native-flatlist

【解决方案1】：

React Navigation v5 使用该功能，您走在正确的道路上 navigation.navigate

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

尝试使用以下解构

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

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

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

【讨论】：

谢谢@denis - 非常感谢这个工作，似乎我很接近只是不得不解构并传递它。

【解决方案2】：

通过导航传递数据

您可以按如下方式通过导航传递数据

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

在下一个屏幕中访问数据

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

【讨论】：