Темный режим — это классная функция в мобильных приложениях. Вот пошаговое руководство по его реализации в нативном приложении React.
- Настройте файл темы: создайте файл с именем
theme.js
в корневом каталоге вашего приложения. В этом файле вы можете определить цветовую схему вашего приложения как для светлого, так и для темного режима.
Theme.js
export const lightTheme = { backgroundColor: '#FFFFFF', textColor: '#000000', }; export const darkTheme = { backgroundColor: '#000000', textColor: '#FFFFFF', };
2. Создайте контекст: создайте ThemeContext
с помощью React createContext
API. Этот контекст предоставит тему для всех компонентов вашего приложения.
themeContext.js
import React, { createContext, useState } from 'react'; import { lightTheme, darkTheme } from './theme'; export const ThemeContext = createContext(); export const ThemeProvider = ({ children }) => { const [isDarkMode, setIsDarkMode] = useState(false); const theme = isDarkMode ? darkTheme : lightTheme; return ( <ThemeContext.Provider value={{ theme, isDarkMode, setIsDarkMode }}> {children} </ThemeContext.Provider> ); };
3. Используйте контекст в своих компонентах: оберните свой компонент верхнего уровня в компонент ThemeProvider
. Это сделает тему доступной для всех дочерних компонентов.
App.js
import { ThemeProvider } from './themeContext'; const App = () => { return ( <ThemeProvider> <MyComponent /> </ThemeProvider> ); };
4. Переключение темы. Создайте кнопку или переключатель в своем приложении для переключения темы. Вы можете использовать функцию setIsDarkMode
из ThemeContext
для переключения темы.
import { useContext } from 'react'; import { ThemeContext } from './themeContext'; const ToggleButton = () => { const { isDarkMode, setIsDarkMode } = useContext(ThemeContext); const handleToggle = () => { setIsDarkMode(!isDarkMode); }; return ( <Button onPress={handleToggle}> {isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'} </Button> ); };
5. Используйте тему в своих компонентах: вы можете использовать объект theme
из ThemeContext
, чтобы стилизовать ваши компоненты на основе текущей темы.
import { useContext } from 'react'; import { ThemeContext } from './themeContext'; const MyComponent = () => { const { theme } = useContext(ThemeContext); return ( <View style={{ backgroundColor: theme.backgroundColor }}> <Text style={{ color: theme.textColor }}>Hello, World!</Text> </View> ); };
Вот и все! Вы завершили реализацию темного режима.