在React Native上使用样式化组件级联文本颜色

Question

我正在尝试创建一个包含

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;
`

但是，这种方法存在一个问题，即所有样式都应用于

这是否可能使用带有React Native的样式化组件？




Answer 1

您可以使用样式表创建包装函数。展平并从结果对象中拾取颜色：

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>
)

注意使用样式表时出现的警告。从文档页面展平：

注意：谨慎行事，因为滥用它会在优化方面加重你的负担。ID通常通过网桥和内存启用优化。直接引用样式对象将剥夺这些优化。