Блог

Главная - Вопросы по программированию - react-собственный плоский список, сделать отрицательный пробел между каждым элементом

react-собственный плоский список, сделать отрицательный пробел между каждым элементом

#css #reactjs #react-native #css-in-js

#css #reactjs #react-родной #css-in-js

Вопрос:

Я пытался создать плоский список изображений, но каждое изображение должно быть выше других:

введите описание изображения здесь

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

Но я получил:

введите описание изображения здесь

Последнее изображение вырезается..

Ответ №1:

вы можете попробовать это

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