从FlatList组件将数据传递到屏幕

Demonix 发表于 Dev

妖魔

我创建了一个名为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（）函数将每个项目数据拖到该屏幕的解决方案。

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

丹尼斯·蔡

您在正确的道路上，因为React Navigationv5使用了Navigation功能。

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

尝试用以下方法解构

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

或明确地传递键（如果您打算设置键/值）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。