Question

我已经创建了cardView，但是如何将其转换为Coordinates GeoCoord CONSTRAINT MountainCoord，我无法理解<FlatList/>中的renderItem是什么？

我当前的代码：

FlatList

如何将其转换为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>

我无法理解<ScrollView style={styles.container}> <FlatList data={marketing_updates.length != 0 && marketing_updates ? marketing_updates : null} renderItem={} /> </ScrollView>里面应该有什么？

Answer 1

sort1 = sorted(list1, key=lambda x: x[0][1])接受一个函数，该函数将当前列表项作为参数并呈现组件。您可以将其视为renderItem中的“地图”函数。

我建议您创建一个演示性的“卡片”组件来封装视图呈现逻辑（例如listItems.map(item => <MyListItem {...item} />），然后将列表项数据作为道具传递：

MarketingUpdateCard

还有卡片组件示例：

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

Answer 2

"command": "tslint.fixAllProblems"道具应该是一个返回本机组件的函数

看到那里：https://facebook.github.io/react-native/docs/flatlist#renderitem

renderItem

将为您的data={marketing_updates} renderItem = { (update) => { <Text> update.project_name </Text> } }数组的每个元素调用renderItem()方法。

Answer 3

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

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

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

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

然后，您可以执行以下操作以创建单位列表：

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

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

3 个答案: