Question

我想在我的应用程序中实现黑暗模式，我使用类和组件构建了所有模式，当我尝试实现react-native-dark-mode时，出现一个错误，我无法在类中使用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 />
    }
}

是否可以在类中使用react Hook组件？

1 个答案: