Question

我正在尝试使用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中使用样式化组件？

Answer 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来警告该警告：

注意：请谨慎行事，因为这样可能会给您带来优化方面的负担。通常，通过ID可以通过网桥和内存进行优化。直接引用样式对象将使您失去这些优化。

在React Native上使用样式化组件来层叠文本颜色

1 个答案: