использовать эквивалент темы для компонента класса - PullRequest
Новая
       33

использовать эквивалент темы для компонента класса

0 голосов
/ 06 апреля 2020

Я хотел бы использовать текущую тему в своем компоненте класса.

Согласно последней документации (RN 5.x), для этих целей есть хук useTheme (), Тем не менее, он не упоминает никакого эквивалентного класса.

Я нашел ThemeContext.Consumer в RN 4.x, но больше не доступен в 5.x.

Возможно ли добиться эффекта от использованияTheme () каким-то другим образом для компонента класса?

1 Ответ

0 голосов
/ 23 апреля 2020

Это не так уж и элегантно, но сработает за вас.

Вот мой метод доступа к теме внутри компонента класса: 

import React from 'react'
import { SafeAreaView, Text } from 'react-native'
import { useTheme } from '@react-navigation/native'

export default class Home extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            theme: undefined
        }
    }

    setTheme = theme => {
        this.setState({theme})
    }

    render () {

        console.log('theme', this.state.theme)

        return (
            <SafeAreaView>
                <SetTheme setTheme={this.setTheme} />
                <Text>Hello world</Text>
            </SafeAreaView>
        )
    }

}

const SetTheme = ({ setTheme }) => {
    const theme = useTheme()

    React.useEffect(() => {
        setTheme(theme)
        return () => null
    },[])

    return null
}
...