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

Question

Я пытаюсь обновить тему своего собственного приложения для реагирования с помощью контекстного API, но выдает ошибку. SetThemeMode не является функцией. (В 'setThemeMode(themeMode === ' светлый '? ' Темный ': ' светлый ')', 'setThemeMode' - "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;

App.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;

Settings.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;

Colors.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

В приложении js... Вы должны установить режим темы, например const [themeMode, setThemeMode] = useState('light');

затем <ThemeContext.Provider value={themeMode,setThemeMode}>

затем, где бы вы ни захотели обновить значение... вы можете получить к нему доступ const [theme,setThemeMode] = useContext(ThemeContext) вместо того, чтобы создавать и назначать состояние контексту, использовать состояние из Context

Answer 2

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

Должно быть

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