React-native样式到文本元素

Question

我已经像这样定义了JSX

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

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

我不想在单个元素上应用相同的样式。 如何在父级上定义样式并应用于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... 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>
    );
  }
}