有没有办法从react-native-paper中的useTheme()挂钩获取键入的主题

68de4m5k 于 2022-12-14 发布在 React

关注(0)|答案(1)|浏览(146)

现在我正在按照themingreact-native-paper指南来定制主题。但是当我尝试通过useTheme钩子来使用主题时，我得到的theme对象的响应似乎没有正确/完全类型化，并且我不能使用对象解构自动完成。

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

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

在这里，VSCode显示theme对象的推断类型为const theme: Theme，但在尝试访问主题属性时无法识别它们：

import { useTheme } from "react-native-paper";

const theme = useTheme();
// e.g. theme.colors is not autocompleted

目前，作为一个解决方案，我将useTheme钩子 Package 在一个自定义钩子中，该钩子从我的输入中返回所需的Theme类型：

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

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

在撰写本文时，我使用的是5.0.0-rc.6版本

react-native

来源：https://stackoverflow.com/questions/73852422/is-there-a-way-to-get-typed-theme-from-usetheme-hook-in-react-native-paper

1条答案

按热度按时间

cyvaqqii1#

就类型文件所示，useTheme有一个泛型参数来支持类型化对象，例如：

const myTheme = { ... };
type MyTheme = typeof myTheme;
const theme = useTheme<MyTheme>()

当然，为了可重用性，您可以将其与您提供的解决方案混合使用：

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

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

赞(0）回复(0）举报 2022-12-14

我来回答

有没有办法从react-native-paper中的useTheme()挂钩获取键入的主题

1条答案

相关问题

热门标签

最新问答