reactjs - 如何破坏.map函数

Question

如何破坏 .map 函数？下面附有代码示例。我想在索引达到 5 时中断外观，因为我只想在屏幕上渲染 5 个头像。

<View style={{ flexDirection: 'row', marginTop: 20, marginLeft: 30  }}>
    {
      peopleGroup.map((people, i) => {
        if(i<5) {
          return (
            <Avatar
              key={people.id}
              width={30}
              position='absolute'
              containerStyle={{ transform: [{translate: [-28 + (28 * i), 0, 1 - (i * 0.1)]}] }}
              small
              rounded
              source={{uri: people.image}}
              activeOpacity={0.7}
              />
          )
        }else if(i===5) {
          return (
          <View key={i} style={{ transform: [{translate: [(25 * i), 9, 0]}]  }}>
            <Text>{peopleGroup.length}</Text>
          </View>
          )
        }
      }
      )
    }
</View>

Answer 1

使用Array.slice在绘制 map 之前。

peopleGroup
.slice(0, 5) // creates a copy of original, 5 items long
.map(...) // subsequent operations work on the copy

田田!