Hemos estado tratando de implementar el modo oscuro en un proyecto antiguo, donde tenemos algunos colores definidos en un archivo separado y se han utilizado en toda la aplicación, como se menciona a continuación.
import {Appearance} from "react-native"; const isDarkMode = (Appearance.getColorScheme() === 'dark') const Color = { WHITE: '#FFFFFF', TRANSPARENT: 'transparent', THEMECOLOR: isDarkMode ? '#1A252F' : '#25A31D', THEMEBLACK: isDarkMode ? '#121B24' : '#252525', THEMEDARKGREEN: isDarkMode ? '#2F3F4D' : '#407F2C', THEMEWHITE: isDarkMode ? '#121B24' : '#FFFFFF', TXTGREETING: isDarkMode ? '#898989' : 'rgba(0, 0, 0, .5)', TXTWHITE: isDarkMode ? '#8A8A8A' : '#FFFFFF', TXTTHEME: isDarkMode ? '#676C69' : '#25A31D', TXTGREY: isDarkMode ? '#676C69' : '#9E9E9E', TXTDARKGREY: isDarkMode ? '#505050' : '#9E9E9E', TXTBLACK: isDarkMode ? '#676c69' : '#252525', } export default { Color };Se utiliza como se muestra a continuación.
import appColors from "common/colors"; export default StyleSheet.create({ container:{ flex:1, backgroundColor: appColors.Color.THEMECOLOR, } });No tenemos ninguna característica interna para cambiar al modo oscuro dentro de la aplicación, pero debería funcionar si se cambia desde la configuración del dispositivo, que funciona bien pero requiere cerrar la aplicación y reiniciar.
No funciona cuando la aplicación se está ejecutando, aunque hemos intentado infundir temas en NavigationContainer
import { NavigationContainer,DarkTheme,DefaultTheme } from "@react-navigation/native"; render() { return ( <NavigationContainer theme={isDarkMode?DarkTheme:DefaultTheme}> <RootStackScreen screenProps={this.props} /> </NavigationContainer> ) }¿Cómo lograr esto cuando la aplicación se está ejecutando y el modo oscuro se cambia desde la configuración del dispositivo?
Gracias por cualquier sugerencia.
Tuve el mismo problema y lo resolví con el siguiente código:
const [colorScheme,setColorScheme] = useState(() => Appearance.getColorScheme()); const handleColorScheme = useCallback((theme) => { setColorScheme(theme.colorScheme); }, []); useEffect(() => { Appearance.addChangeListener(handleColorScheme); return () => { Appearance.removeChangeListener(handleColorScheme); }; }, [handleColorScheme]);Lo que hace Arthur es correcto. Lo que también podría hacer para el cambio manual es agregar un botón que escriba "claro" y "oscuro" en un almacenamiento ASync y luego leer los valores y cargarlo antes del procesamiento.
¡Al menos, eso es lo que estoy haciendo! Entonces, incluso los botones manuales son posibles con seguridad. Lo he hecho porque una gran parte de nuestra base de usuarios usa teléfonos más antiguos.
Por lo general, el código de Arthur va al archivo que tiene la pila de navegación dentro. Si tiene una aplicación de una página, debe cargarla en la pantalla de inicio.