简体   繁体   中英

react-native flatList, make negative space between each element

I tried to make a flatlist of image, but each image should be above the others:

在此处输入图片说明

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

在此处输入图片说明

So I tried to do something like that:

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

But I got:

在此处输入图片说明

The last image is cut..

you can try this

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM