如何在React Native中调用类内钩子组件

Question

使用的技术

React Native Appearance，Typescript&Redux复赛。

问题

我正在尝试将我定制的主题颜色传递到类组件中。我也知道钩子不能在类组件中使用/调用，只能在函数组件中使用。我之所以使用类组件，是因为Redux Rematch。有没有办法让我的颜色从下面列出的挂钩中进入我的班级组件？

这就是我构建主题的方式：

索引.tsx

const palette = {
colourTextDark: "#ffffff",
colourTextLight: "#000000",
};
export const colors = {
colourText: palette.colourTextLight,
};
export const themedColors = {
default: {
...colors,
},
light: {
...colors,
},
dark: {
...colors,
colourText: palette.colourTextDark,
},
};

挂钩.tsx

import { useColorScheme } from "react-native-appearance";
import { themedColors } from "./";
export const useTheme = () => {
const theme = useColorScheme();
const colors = theme ? themedColors[theme] : themedColors.default;
return {
colors,
theme,
};
};

理想情况下，我想这样使用它：

import { useTheme } from "../../theme/hooks";
...
class Example extends React.Component<Props> {
render() {
// This doesn't work
const { colors } = useTheme();
return (
<Text style={{ color: colors.colourText }}>Please help :)</Text>
)
}
}

我该怎么做？提前感谢：(

Answer 1

您可以创建这样的高阶组件：

const themeHOC = (Component) => {
return (WrappedComponent = (props) => {
const { colors } = useTheme();
return <Component {...props} colors={colors} />;
});
};

并像这样使用：

themeHOC(<Example />)

Answer 2

这对我有效。

componentDidMount() {
(async () => {
const theme = useColorScheme() === "dark" ? styles.dark : styles.light;
this.setState({ theme });
})();
this.sendEmail();
}