React Native自定义SubHeadingText组件无法覆盖fontSize样式如何解决

问题原因 #

React Native 中给组件style属性传入样式数组时，数组靠后位置的样式优先级更高，同属性的样式会覆盖前面的配置。
你当前代码中将默认样式styles.textSubHeading放在样式数组末尾，它自带的fontSize: 19会覆盖前面传入的自定义字号，所以外部传的样式不生效。

修复方案 #

调整样式数组的顺序，把默认样式放在前面，自定义样式放在后面即可。如果需要支持自定义所有样式属性，推荐直接传入整个style对象，写法更灵活：

// 修复后的组件代码
function SubHeadingText({children, style}) {
  return (
    <Text style={[styles.textSubHeading, style]}>
      {children}
    </Text>
  );
}

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

这种写法下，外部传入的所有样式属性都会覆盖默认样式的同属性配置，不需要单独提取fontSize处理，也兼容你现有传入{fontSize:14}的调用代码，不需要做其他修改。

内容的提问来源于stack exchange，提问作者Sanaullah Javeid