Каскадный цвет текста со стилизованными компонентами в React Native
Я пытаюсь создать компонент с 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
Вы можете создать функцию-оболочку с помощью 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 со страницы документации:
NOTE: Exercise caution as abusing this can tax you in terms of optimizations. IDs enable optimizations through the bridge and memory in general. Refering to style objects directly will deprive you of these optimizations.