React Native TypeScript报错：textSecondary属性不存在问题排查

你的代码已在 Theme 的 light 和 dark 模式下定义了textSecondary颜色，运行时也能正常显示，但 VS Code 报 TS2339 错误，提示该属性不存在于默认颜色类型中。这是 TypeScript 自动推导的主题颜色类型与你自定义结构不匹配导致的。

问题原因 #

React Native 默认的ThemeColors类型（即报错信息中显示的{ primary: string; background: string; card: string; text: string; border: string; notification: string; }）并不包含textSecondary属性。你手动在 Theme 对象中添加了该属性，但 TypeScript 未自动识别这个扩展，依然以默认类型做静态检查，因此抛出错误。

而运行时 JavaScript 是动态类型语言，会直接读取对象上的textSecondary属性，所以实际颜色显示正常。

解决方法 #

1. 自定义完整的主题类型 #

手动定义包含textSecondary的颜色类型，并绑定到你的 Theme 对象上，让 TypeScript 识别扩展属性：

// 定义自定义颜色类型
type CustomColors = {
  primary: string;
  secondary: string;
  background: string;
  card: string;
  text: string;
  textSecondary: string;
  border: string;
  error: string;
};

// 定义主题结构类型
type CustomTheme = {
  mode: 'light' | 'dark';
  colors: CustomColors;
};

// 为 Theme 指定类型
export const Theme: { light: CustomTheme; dark: CustomTheme } = {
  light: {
    mode: 'light',
    colors: {
      primary: '#1976d2',
      secondary: '#7393B3',
      background: '#f9f9f9',
      card: '#ffffff',
      text: '#303233',
      textSecondary: '#727272',
      border: '#e8e8e8',
      error: '#f44336',
    },
  },
  dark: {
    mode: 'dark',
    colors: {
      primary: '#1976d2',
      secondary: '#7393B3',
      background: '#171819',
      card: '#202122',
      text: '#e4e6eb',
      textSecondary: '#b0b3b8',
      border: '#333435',
      error: '#f44336',
    },
  },
};

2. 扩展第三方主题库的默认类型（若使用） #

如果你使用react-native-paper这类带主题系统的库，需要扩展它的默认 Theme 类型，让 TypeScript 识别新增的textSecondary：

declare module 'react-native-paper/lib/typescript/types' {
  interface ThemeColors {
    textSecondary: string;
  }
}

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