javascript - 如何在 React Native 中使用 FlatList 显示数据？

Question

我已经创建了 cardView 但如何将其转换为 <FlatList/>我无法理解 renderItem 应该是什么的 FlatList ？

我当前的代码:

<ScrollView style={styles.container}>
                <View style={styles.cardView}>
                    <Text style={styles.projectName}>{marketing_updates.length != 0 ? marketing_updates[0].project_name: ""}</Text>
                    <Text style={styles.title}>{marketing_updates.length != 0 ? marketing_updates[0].title: ""}</Text>
                    <Text style={styles.description}>Description: {marketing_updates.length != 0 ? marketing_updates[0].description: ""}</Text>
                    <Image
                    style={styles.img}
                    source={{uri: marketing_updates.length != 0 ? marketing_updates[0].image: null}}
                    />
                    <View style={styles.buttons}>
                        <Text style={styles.like}>Like</Text>
                        <Text style={styles.share}>Share</Text>
                    </View>
                    <View style={styles.comment}>
                        <Text>Comments: </Text>
                        <Text>comment 1</Text>
                        <Text>comment 2</Text>
                        <Text>comment 3</Text>
                    </View>
                </View>

            </ScrollView>

如何将其转换为 FlatList ？

我试过的:

<ScrollView style={styles.container}>
                <FlatList
                data={marketing_updates.length != 0 && marketing_updates ? marketing_updates : null}
                renderItem={}
                />

            </ScrollView>

我无法理解里面应该有什么 renderItem={} ？

Answer 1

renderItem接受一个函数，该函数将当前列表项作为参数并呈现一个组件。您可以将其视为 listItems.map(item => <MyListItem {...item} /> 中的“ map ”功能。 .

我建议您创建一个展示性“卡片”组件来封装 View 渲染逻辑(例如 MarketingUpdateCard)，并将列表项数据作为 Prop 传递:

renderItem={({ item }) => (
  <MarketingUpdateCard {...item} />
)}

还有一个示例卡片组件:

// MarketingUpdateCard.js
const MarketingUpdateCard = ({ project_name, title, description, image }) => (
    <View>
      // your current card template here
    </View>
)