从 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如下：

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 使用了函数 navigation.navigate

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

尝试用以下方法解构

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

或者如果您打算设置 keys/values

则显式传递密钥

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

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

从 FlatList 组件向屏幕传递数据

Passing Data to Screen from FlatList Component

react-native

react-navigation

react-native-flatlist