如何在 React Native 中调用 class 组件中的 hook？

Question

使用的技术

React Native 外观、Typescript 和 Redux 重赛。

问题

我正在尝试将自定义主题颜色传递到 class 组件中。我也明白钩子不能在 class 组件中 used/called 而只能是功能组件。我使用 class 组件的原因是因为 Redux Rematch。有没有办法让我从下面列出的钩子中获取我的颜色到我的 class 组件中？

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

index.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,
  },
};

hooks.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();
}

如何在 React Native 中调用 class 组件中的 hook？

How to call hook in class component in React Native?

themes

react-native

redux

react-redux