You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为react-native-paper的useTheme() Hook获取带类型的主题?

React Native Paper自定义主题类型缺失导致自动补全失效问题

我按照React Native Paper的自定义主题指南配置主题,但使用useTheme Hook获取主题对象时,类型未被正确完整赋予,导致无法使用对象解构自动补全功能。当前使用的react-native-paper版本为5.0.1(曾用5.0.0-rc.6)。

主题配置代码

export const LightTheme = {
  ...PaperDefaultTheme,
  colors: {
    customColor: 'green',
  },
};

<PaperProvider
  theme={
    colorScheme === "dark"
      ? { ...DarkTheme }
      : { ...LightTheme }
}
>
  <AppProvider>
    {{...}}
  </AppProvider>
</PaperProvider>

VSCode显示theme对象的推断类型为const theme: Theme,但访问其属性(如theme.colors)时无法触发自动补全。

当前解决方法

封装useTheme Hook,强制返回自定义的Theme类型:

import { useTheme as _useTheme } from "react-native-paper";
import { Theme } from "../theme";

export function useTheme(): Theme {
  const theme = _useTheme();
  return theme;
}

内容的提问来源于stack exchange,提问作者z_lander

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.18 02:45:38