如何在 react-native 的类组件中使用 useTheme()？答案

【问题标题】：How Can I use useTheme() in class components in react-native?如何在 react-native 的类组件中使用 useTheme()？
【发布时间】：2020-11-05 18:30:24
【问题描述】：

目前我想使用 useTheme() 但作为它的钩子，我不能在类组件中使用它。但是这是我在类组件中使用它的强迫症，有人可以告诉我如何使用吗？

【问题讨论】：

标签： reactjs react-native theming

【解决方案1】：

如果不知道您使用的是什么库（useTheme() 不是 React 或 React Native 的一部分），很难针对您的用例做出具体回答。因为钩子只能在函数式组件中使用，所以您可以将您的类组件封装在一个组件中。例如：

class MyComponent extends React.Component {
    render() {
        return <p>Hello!</p>
    }
}

export default function(props) {
    const theme = useTheme()

    return <MyComponent {...props} theme={theme}/>
}

【讨论】：

在这种情况下包装组件是最佳做法吗？
我会说这可能取决于 OP 使用的库。如果库有一些不使用钩子的替代方案（例如提供程序或高阶组件），我可能会使用它。鉴于问题没有说明他正在使用哪个库，所以很难说。如果他出于某种原因需要使用类组件，这并不能回答这个问题，但我发现最好尽可能多地使用功能组件（更易于阅读，代码更少）。自从 React 16 出现以来，我从未发现自己处于绝对必须使用类组件的情况。

【解决方案2】：

React Navigation 没有说明替代方案，但您可以将类组件包装在函数组件中并将其作为道具传递

【讨论】：