react-native flatList，使每个元素之间为负 space

Question

我尝试制作一个图片平面列表，但每张图片都应该在其他图片之上：

<FlatList
    style={styles.listAvatar}
    data={item.etudiants}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item, index }) => <ItemAvatar urlAvatar={item.avatar} />}
    horizontal
/>

const ItemAvatar = ({urlAvatar}:any) => {
    return (
            <Image
                style={{ width: 35, height: 35, borderRadius: 100}}
                source={{uri: urlAvatar}}
            />
    )
}

所以我尝试做类似的事情：

<Image
    style={{ width: 35, height: 35, borderRadius: 100, marginRight: -15}}
    source={{uri: urlAvatar}}
/>

但是我得到了：

最后一张图被剪掉了..

Answer 1

你可以试试这个

<Image
    style={{
      width: 35,
      height: 35,
      borderRadius: 100,
      left: index * -15,
    }}
    source={{ uri: urlAvatar }}
/>

react-native flatList，使每个元素之间为负 space

react-native flatList, make negative space between each element

css

reactjs

react-native

css-in-js