Стилизация нескольких стилевых элементов с помощью стилевых компонентов в React Native - PullRequest
Новая
       16

Стилизация нескольких стилевых элементов с помощью стилевых компонентов в React Native

0 голосов
/ 21 февраля 2019

Я уже некоторое время использую Styled-компоненты с React web, но недавно я начал работать над приложением React Native, в котором я решил использовать styled-compoents. Было здорово, когда стилизация компонентов, которые имеют только *Свойство 1001 *, такое как компоненты react-native по умолчанию.

Проблема, с которой я столкнулся, заключается в том, что мне нужно стилизовать более сложный компонент, имеющий несколько свойств стиля, таких как containerStyle, inputStyle и др.

Когда это только одно свойство стиля с другим именем, я могу сделать следующее: 

const StyledBadge = styled(({ style, ...rest }) => {
  return <Badge {...rest} containerStyle={style} />;
})`
  position: absolute;
  right: 0;
  top: 0;
`;

Это работает безупречно, но когда компонент имеет несколько стилей, у меня нетИдея, что делать: 

const StyledList = styled(({ style, ...rest }) => {
  return <List {...rest} containerStyle={style} searchInputStyle={?} searchItemStyle={?} />;
})`
`;

С такими компонентами, как Gifted-React-Native-Chat, еще хуже, поскольку у него есть свойства для передачи свойств как объектов его внутренним компонентам, таким как messageProps, listViewProps, containerProps и все они имеют свойство style.

Кто-нибудь знает, как это сделать, или если это вообще возможно?

Я бeen ищет и пытается найти решение для этого в течение нескольких дней, но я не могу.

Спасибо!

...