Javascript 如何在react native中使用FlatList显示数据？

我已经创建了cardView，但如何将其转换为

我无法理解

平面列表的
渲染项应该是什么

我当前的代码：

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


{marketing_updates.length！=0？marketing_updates[0]。项目名称：'}
{marketing_updates.length！=0？marketing_updates[0]。标题：'}
描述：{marketing_updates.length！=0？marketing_updates[0]。描述：“”
喜欢
共有
评论：
评论1
评论2
评论3

如何将其转换为平面列表

我尝试的是：

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

            </ScrollView>



我无法理解renderItem={}
中应该包含什么？
renderItem
接受一个函数，该函数将当前列表项作为参数并呈现一个组件。您可以将其视为类似于
listItems.map（item=>
中的“map”函数

我建议您创建一个表示“卡片”组件来封装视图呈现逻辑（例如，
MarketingUpdateCard
），只需将列表项数据作为道具传递：

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

renderItem={（{item}）=>(
)}

以及一个示例卡组件：

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

//MarketingUpdateCard.js
const MarketingUpdateCard=（{项目名称、标题、描述、图像}）=>(
//您当前的卡模板在这里
)
renderItem
接受一个函数，该函数将当前列表项作为参数并呈现组件。您可以将其视为“映射”函数，如
listItems.map（item=>
）

我建议您创建一个表示“卡片”组件来封装视图呈现逻辑（例如，
MarketingUpdateCard
），只需将列表项数据作为道具传递：

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

renderItem={（{item}）=>(
)}

以及一个示例卡组件：

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

//MarketingUpdateCard.js
const MarketingUpdateCard=（{项目名称、标题、描述、图像}）=>(
//您当前的卡模板在这里
)
renderItem

属性应该是一个返回react本机组件的函数

见：

data={marketing_updates}
renderItem={
（更新）=>{
update.project\u名称
}
}

---

renderItem（）

方法将为

marketing\u updates

数组的每个元素调用。

renderItem属性应该是一个返回react本机组件的函数

见：

data={marketing_updates}
renderItem={
（更新）=>{
update.project\u名称
}
}

---

renderItem（）

方法将为

marketing\u updates

数组的每个元素调用。

根据react原生文档，“renderItem”执行以下操作：

从数据中获取项目并将其呈现到列表中

因此，您可以将任何类型的react组件传递给它，平面列表将对列表中的每个项目使用此组件。在您的情况下，您可以执行以下操作：

将“CardView”移动到名为“CardViewComponent”的新组件

然后，您可以执行以下操作来创建平面列表：

<FlatList
  data={marketing_updates.length != 0 && marketing_updates ? marketing_updates : null}
  renderItem={({item}) => {
    <CardViewComponent marketingData={marketing_updates[item.index]}/>
  }}
/>

{
}}
/>

根据react原生文档，“renderItem”执行以下操作：

从数据中获取项目并将其呈现到列表中

因此，您可以将任何类型的react组件传递给它，平面列表将对列表中的每个项目使用此组件。在您的情况下，您可以执行以下操作：

将“CardView”移动到名为“CardViewComponent”的新组件

然后，您可以执行以下操作来创建平面列表：

<FlatList
  data={marketing_updates.length != 0 && marketing_updates ? marketing_updates : null}
  renderItem={({item}) => {
    <CardViewComponent marketingData={marketing_updates[item.index]}/>
  }}
/>

{
}}
/>

我知道第一块代码是CardView组件，您将其视为react组件，对吗？@MtgKhaJeskai我希望每个列表项显示项目名称、标题、说明、图像等。我知道第一块代码是CardView组件，您将其视为react组件，对吗？@MtgKhaJeskai我希望每个列表项显示项目名称、标题、描述、图像等，但我需要检查

marketing\u updates

length是否为非零？因此数据应为

data={marketing\u updates.length！=0&&marketing\u updates？marketing\u updates:null}

我说得对吗？你可以给它传递一个零长度数组，它将调用renderItem（）零时间，因为数组将包含零元素，并且不会引发错误。我希望每个列表项显示项目名称、标题、描述、图像等，但我需要检查

marketing\u更新

length是否为非零？因此数据应为

data={marketing_updates.length！=0&&marketing_updates？marketing_updates:null}

我说的对吗？你可以给它传递一个零长度数组，它将调用renderItem（）零时间，因为数组将包含零元素，并且不会引发错误。我希望每个列表项显示项目名称、标题、说明、图像等。我希望每个列表项显示项目名称、标题、说明、图像等。我希望每个列表项显示项目名称、标题、说明、图像等呃，这就是将要发生的事情。