Цвет текста каскада со стилизованными компонентами в React Native - PullRequest
Новая
       28

Цвет текста каскада со стилизованными компонентами в React Native

0 голосов
/ 17 декабря 2018

Я пытаюсь создать компонент с React Native, который включает в себя <Text> компонент внутри обернутого компонента: 

const MyComponent = props => (
  <View {...props}>
   <Text {...props}>Hello world</Text>
  <View>
)

const MyRedComponent = styled(MyComponent)`
  color: #000;
  margin-left: 10px;
  background: #F00;
`

Я составляю свой компонент таким образом, чтобы я мог изменить текстцвет из того же стилизованного компонента, что и при изменении цвета фона: 

const MyBlueComponent = styled(MyRedComponent)`
  color: #FFF;
  background: #00F;
`

Однако при таком подходе возникает проблема, заключающаяся в том, что к компоненту <Text> применяются все стили, а не только color;в этом примере компонент <Text> также получает стиль margin-left от родительских стилей, что не является предпочтительным.Мне бы хотелось, чтобы цвет текста каскадно связывался с компонентом <Text>.

Возможно ли это с использованием стилизованных компонентов с React Native?

1 Ответ

0 голосов
/ 03 января 2019

Вы можете создать функцию-обертку, используя StyleSheet.flatten и выбрать цвет из результирующего объекта: 

const MyComponent = props => (
  <View {...props}>
    <Text style={{ color: StyleSheet.flatten(props.styles).color }}>Hello world</Text>
  <View>
)

const MyRedComponent = styled(MyComponent)`
  color: #000;
  margin-left: 10px;
  background: #F00;
`

Имеет смысл извлечь выделение в его собственную функцию.Например, вы можете создать следующую оболочку: 

const pickColorFromStyles = styles => {
  const { color } = StyleSheet.flatten(styles)
  return { color }
}

... и использовать эту функцию в своем компоненте: 

const MyComponent = props => (
  <View {...props}>
    <Text style={pickColorFromStyles(props.styles)}>Hello world</Text>
  <View>
)

Обратите внимание на предупреждение с помощью StyleSheet.flatten на странице документации:

ПРИМЕЧАНИЕ. Соблюдайте осторожность, поскольку злоупотребление этим может обернуть вас с точки зрения оптимизации.Идентификаторы обеспечивают оптимизацию через мост и память в целом.Прямая ссылка на объекты стиля лишит вас этих оптимизаций.

...