如何为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
相关产品推荐
相关产品推荐

