【问题标题】:react-native flatList, make negative space between each elementreact-native flatList,在每个元素之间留出负空间
【发布时间】:2020-11-13 13:21:44
【问题描述】:

我试图制作一张图片的平面列表,但每张图片都应该在其他图片之上:

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

但我得到了:

最后一张图片被剪掉了..

【问题讨论】:

    标签: css reactjs react-native css-in-js


    【解决方案1】:

    你可以试试这个

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

    【讨论】: