Question

假设您在本机的React中有10个项目的数组，而您只想在屏幕上仅显示5个。

数据

state = {
      people: [
       {firstName: Ben, lastName: Mark},
       {firstName: Linda, lastName: Hanson},
       {firstName: Arthur, lastName: Merlin},
       {firstName: Jesus, lastName: Joshua}
]
}

查看

<ScrollView >
      {
        people.map((item, i) => {
      return (
      <View key={i} style={styles.user}>
      <Card >
       <ListItem
        hideChevron={true}
        title={item.firstName} {item.lastName}
        />
        </Card>
      </View>
          );
        })
      }
    </ScrollView>

请问我该如何实现？

Answer 1

简单，只需在您的数组上使用slice即可：

people.slice(0, 5).map((item, i)

它将仅采用数组的前5个值。

Answer 2

您可以slice您的数据

<ScrollView >
  {
    people.slice(0, 5).map((item, i) => {
  return (
  <View key={i} style={styles.user}>
  <Card >
   <ListItem
    hideChevron={true}
    title={item.firstName} {item.lastName}
    />
    </Card>
  </View>
      );
    })
  }
</ScrollView>

反应本机显示x数组中的行数

2 个答案: