Таблица стилей React Native: last-child

Question

Я пытаюсь показать список в react native. Я хочу, чтобы последний дочерний элемент в списке выглядел по-другому, но я не могу выбрать его.

У меня есть работа с массивом, которую я oop выполняю.

         this.state.chores.map((chore, i) => {
            const style = EStyleSheet.child(styles, 'card', i, this.state.chores.length);
            return (
                <Card title={chore.name} key={i} style={style}>
                   <Text>{chore.desc}</Text>
                </Card>
           )
        })


       EStyleSheet.build()

       const styles = EStyleSheet.create({
         card: {
             paddingBottom: '10rem',
         },
         'card:last-child': {
             backgroundColor: '#a84ca2',
         }
       });

Любая помощь приветствуется.

Answer 1

Ваша проблема не имеет ничего общего с Расширенной таблицей стилей. Компонент Card из react-native-elements не использует опору стиля: containerStyle или wrapperStyle

. Измените карту таким образом, и она будет нормально работать с остальная часть вашего кода. Вы также можете go использовать условный подход, как и другие ответы здесь.

 <Card title={chore.name} key={i} containerStyle={style}>
      <Text>{chore.desc}</Text>
    </Card>

Answer 2

Почему бы вам не проверить длину списка и не применить другой стиль, когда это последний элемент?

<Card title={chore.name} key={i} style={chores.length - 1 == i ? {background: red } : style}>
  <Text>{chore.desc}</Text>
</Card>