如何基于props动态设置字体大小并设置无传入prop时的默认值

你给Text组件的style属性直接传入了number类型的字号值，但style要求接收的是StyleProp<TextStyle>类型（即样式对象、样式数组或StyleSheet生成的样式引用），类型不匹配所以触发编译报错。

方案1：数组样式合并（推荐，适合多默认样式场景） #

这是React/React Native官方推荐的样式覆盖写法，数组后项的同名属性会自动覆盖前项，无需手动写条件判断，类型完全匹配：

import { StyleSheet, Text, TextStyle } from 'react-native'

// 组件Props类型定义，建议加Partial允许传入部分样式属性
interface TextComponentProps {
  textListStyle?: Partial<TextStyle>
}

const YourTextComponent = ({ textListStyle }: TextComponentProps) => {
  return (
    <Text style={[defaultStyles.text, textListStyle]}>
      测试文本
    </Text>
  )
}

// 默认样式定义
const defaultStyles = StyleSheet.create({
  text: {
    fontSize: 15,
    // 其他你需要的默认样式，比如颜色、行高等
    color: '#222',
    lineHeight: 22
  }
})

方案2：对象写法（适合仅需覆盖fontSize的简单场景） #

如果你只需要开放fontSize的修改权限，直接把数值放到样式对象的fontSize字段里即可：

<Text
  style={{
    fontSize: textListStyle?.fontSize ?? 15
  }}
>
  测试文本
</Text>

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