这个实现有什么问题？我无法覆盖样式答案

【问题标题】：What's wrong with this implementation? I'm unable to override the style这个实现有什么问题？我无法覆盖样式
【发布时间】：2021-10-07 14:46:11
【问题描述】：

我想覆盖我的副标题文本的 fontSize。我在我的组件中获得了样式道具。我已经使用 console.log 检查了它，它很好。但我的风格没有实施。我的代码有什么问题。请帮忙。

这是一个叫做副标题的组件，

function SubHeadingText({children, style}) {
  return (
    <Text style={[{fontSize: style.fontSize}, styles.textSubHeading]}>
      {children}
    </Text>
  );
}

const styles = StyleSheet.create({
  textSubHeading: {
    fontSize: 19,
    color: colors.black,
  },
});

这是我传递的风格

<SubHeadingText style={{fontSize: 14}}>
    All fields are required to register with App.
</SubHeadingText>

【问题讨论】：

你的风格道具错误：你需要style={[ styles.textSubHeading, style ]}
@ChrisG 在 react native 中，style 属性可以有多个样式，它们会按数组顺序被分解为一个。见RN style docs“你也可以传递一个样式数组——数组中最后一个样式优先，所以你可以用它来继承样式”。
@zero298 刚刚发现，修复了我的评论
文档中也提到了优先顺序：reactnative.dev/docs/style
@ChrisG 同样，请注意，传播从 StyleSheet.create 返回的内容实际上会导致更多问题，因为您最终传播的是样式表的 id 而不是实际属性。每当我从事上一个 RN 项目时，这都是造成很多混乱的根源。

标签： javascript react-native

【解决方案1】：

翻转样式的顺序，它们按顺序应用，然后用常量样式表覆盖它：

见React Native Style Docs:

您还可以传递样式数组 - 数组中的最后一个样式有优先级，因此您可以使用它来继承样式

function SubHeadingText({children, style}) {
  return (
    <Text style={[
      styles.textSubHeading, // Needs to be applied first so next line overrides
      {fontSize: style.fontSize}, // Will override styles.textSubHeading fontSize
    ]}>
      {children}
    </Text>
  );
}

【讨论】：

如果整个答案基本上是文档的链接，也许考虑不将其发布为答案？
@ChrisG 我会在中间见你，并将其作为 CW 发布。
感谢您的回答，我在发布问题后就看到了我的错误。再次感谢。