是否可以在类中使用反作用钩子组件

Question

我想在我的应用程序中实现黑暗模式，我用类和组件构建了所有这些，当我试图实现react原生黑暗模式时，我遇到了一个错误，我无法在类中使用Hook。重写所有内容需要花费大量时间。

原始

import { useDarkMode } from 'react-native-dark-mode'
function Component() {
const isDarkMode = useDarkMode()
return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
}

但我想要一些类似的东西：

import { useDarkMode } from 'react-native-dark-mode'
class Home extends React.Component ... 
render() {
const isDarkMode = useDarkMode()
return (<View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />)
}

Answer 1

钩子不能直接从类组件中使用，但您可以引入一个功能组件，从钩子中提取您需要的值：

function ViewWithTheme() {
const isDarkMode = useDarkMode()
return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
}
class Home extends React.Component {
// ...
render() {
return <ViewWithTheme />
}
}