Динамически обновлять контекст в React Native hook

Question

Я пытаюсь обновить тему моего реагирующего нативного приложения, используя контекстный API, но выдает ошибку. SetThemeMode не является функцией. (В 'setThemeMode (themeMode ===' light '?' Dark ':' light ')', setThemeMode 'is "i")

Я взял ссылку на следующую статью блога https://www.smashingmagazine.com/2020/01/introduction-react-context-api/

Изображение основной ошибки

ThemeContext. js

import React from 'react';

const ThemeContext = React.createContext(['light', () => {}]);
export default ThemeContext;

Приложение. js

    import React, {useState} from 'react';

    import Nav from './src/navigation/Nav';
    import 'react-native-gesture-handler';
    import ThemeContext from './src/context/ThemeContext';

    const App = () => {
    const [theme] = useState("light");
    return (
    <>
    <ThemeContext.Provider value={theme}>
        <Nav />
    </ThemeContext.Provider>
    </>
    );
    };

    export default App;

Настройки. js

    import React, {useContext} from 'react';
    import {View, Text, TouchableHighlight, Alert} from 'react-native';
    import Icon from 'react-native-vector-icons/dist/Ionicons';

    import Switches from 'react-native-switches';

    import ThemeContext from './../context/ThemeContext';
    import AppTheme from './../Colors';

    import {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp,
    } from 'react-native-responsive-screen';
    import ThemeSwitch from './ThemeSwitch';

    const Settings = () => {
    const [themeMode, setThemeMode] = useContext(ThemeContext);
    const theme = useContext(ThemeContext);
    const currentTheme = AppTheme[theme];

    return (
        <>
    <TouchableHighlight
        onPress={() => setThemeMode(themeMode === 'light' ? 'dark' : 'light')} 
        style={{
            backgroundColor: 'black',
            borderRadius: 100,
            width: wp(14),
            height: wp(14),
            justifyContent: 'center',
            alignItems: 'center',
        }}>
        <Icon name="md-arrow-round-back" size={wp(8)} color="white" />
        </TouchableHighlight>
    </>
    );
    };

    export default Settings;

Nav. js

    import React from 'react';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';

    import Welcome from './../components/Welcome';
    import Settings from './../components/Settings';
    import Main from './../components/Main';

    const Stack = createStackNavigator();

    const Nav = () => {
    return (
        <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
            headerShown: false,
            }}>
            <Stack.Screen name="Main" component={Main} />
            <Stack.Screen name="Settings" component={Settings} />
            <Stack.Screen name="Welcome" component={Welcome} />
        </Stack.Navigator>
        </NavigationContainer>
    );
    };

    export default Nav;

Цвета. js

        const AppTheme = {
    light: {
        name: 'light',
        textColor: 'black',
        backgroundColor: 'white',
    },
    dark: {
        name: 'dark',
        textColor: 'white',
        backgroundColor: 'black',
    },
    };

    export default AppTheme;

Я хочу динамически обновить контекст. Простите за такую ​​глупую ошибку, но я новичок, чтобы реагировать и Js. Я приложил изображение проблемы. Я думаю, что я делаю что-то не так с useContext , потому что, когда я пытаюсь console.log (ThemeContext) , он показывает undefined вместо света.

Answer 1

const [themeMode, setThemeMode] = useContext(ThemeContext);

Должно быть

const [themeMode, setThemeMode] = useState(ThemeContext);