Question

我已经像这样定义了JSX

3.1.0

视图组件没有颜色属性，也没有应用子元素的文本颜色设置。

我不想在单个元素上应用相同的风格。如何在父级上定义样式并应用于所有子元素，如HTML中的普通元素？

Answer 1

该样式正在Text组件之间传播，因此您可以执行以下操作：

<Text style={{color: 'red'}}>
  <Text>Text1</Text>
  <Text>Text2</Text>
  <Text>Text3</Text>
</Text>

Answer 2

除了将样式单独应用于每个元素之外，您可以使用类似lodash _.map之类的内容，并以编程方式呈现每个子项并将样式声明一次。

您是否尝试这样做是因为您希望每个文本标签都有不同的颜色？

为了减少代码，你也可以“解构”它。

const { aStyle, anotherStyle, andAnotherStyle } = styles;

而不是styles.aStyle. styles.anotherStyle...。

Answer 3

据我所知，没有简单的方法可以从超级Componnet继承样式。

也许您可以自定义这样的组件：

 class YourComponent extends Component {
  render() {
    let children = [];
    React.Children.forEach(this.props.children, (item, index) => {
      // textStyle is the style that you want children to inherit
      children.push(React.cloneElement(item, this.props.textStyle));
    });

    return (
      <View>
        { children }
      </View>
    );
  }
}

React-native样式到文本元素

3 个答案: