[英]How can I implement dark mode in react native app
I want to add dark mode to my app.我想在我的应用程序中添加暗模式。 But the documentations are confusing.但文件令人困惑。 Is there any easy way to understand how to implement the dark mode.有什么简单的方法可以理解如何实现暗模式。 I also want the darkmode to stay active in my all app screens.我还希望暗模式在我的所有应用程序屏幕中保持活跃。 And need to implement the mode in both ios and android.并且需要在 ios 和 android 中实现该模式。 And I am using stacknavigator for navigating through multiple screens.我正在使用 stacknavigator 在多个屏幕中导航。 I have tried one expo project could not achieve a satisfying result.我试过一个 expo 项目无法达到令人满意的结果。 Any help will be good and thanks.任何帮助都会很好,谢谢。
(my spanish is not so good) (我的西班牙语不太好)
I add dark mode to my app.我在我的应用程序中添加了暗模式。 I using react-navigation, styled-components, styled-theming and the API Context from React:)我使用来自 React 的 react-navigation、样式组件、样式主题和 API 上下文:)
My implementation:我的实现:
In the App.js file在 App.js 文件中
state = {
//Dark Mode
darkMode: false,
switchDarkMode: () => {
const darkMode = new Boolean(!this.state.darkMode)
this.setState({ darkMode: !this.state.darkMode },
() => AsyncStorage.setItem('darkMode', darkMode.toString()))
},
}
<ThemeProvider theme={{ mode: darkMode ? 'dark' : 'light' }}>
<AppContainer
ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)}
uriPrefix={prefix}
onNavigationStateChange={(prevState, currentState) => {
const currentScreen = this.getActiveRouteName(currentState)
const prevScreen = this.getActiveRouteName(prevState)
return prevScreen !== currentScreen && Analytics.setCurrentScreen(currentScreen)
}}
/>
</ThemeProvider>
The darkMode is actived/desactived in other Screen, Config.js file: darkMode 在其他 Screen、Config.js 文件中被激活/取消激活:
<NotificationsContext.Consumer>
{
({ darkMode, switchDarkMode }) => (
<ListItem
title="Activar"
containerStyle={{
backgroundColor: darkMode ? '#1f1f1f' : '#FFF'
}}
titleStyle={{
fontSize: isTablet ? 23 : 18,
color: darkMode ? '#FFF' : '#333',
fontFamily: 'Avenir-Book'
}}
bottomDivider
switch={{
value: darkMode,
onValueChange: switchDarkMode,
trackColor: {
false: '#edf2f4',
true: '#29aae2'
}
}}
/>
</View>
)
}
</NotificationsContext.Consumer>
Finally in mi StyledComponents file:最后在 mi StyledComponents 文件中:
import {Platform, Dimensions } from 'react-native';
import styled from 'styled-components/native';
import theme from 'styled-theming';
import { isTablet } from 'react-native-device-detection';
//Get dimensions device
const {width, height} = Dimensions.get('window')
//Start Manage Theme
const HeaderBackgroundColor = theme('mode', {
light: Platform.OS === 'ios' ? '#FFFFFF' : '#FAFAFA',
dark: '#1f1f1f'
})
const DrawerBackgroundColor = theme('mode', {
light: '#EDF2F4',
dark: '#1f1f1f'
})
const BackgroundColor = theme('mode', {
light: '#FFFFFF',
dark: '#1f1f1f'
})
const SemiDarkBackground = theme('mode', {
light: '#EDF2F4',
dark: '#333333'
})
const TextColor = theme('mode', {
light: '#333333',
dark: '#FFFFFF'
})
const Header = styled.SafeAreaView`
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-horizontal: 15;
background-color: ${HeaderBackgroundColor};
`
const MainContainer = styled.View`
flex: 1;
background-color: ${BackgroundColor};
`
const MenuContainer = styled.View`
flex: 1;
background-color: ${SemiDarkBackground};
`
. . . . . .
If you have questions please add your feedback:)如果您有任何问题,请添加您的反馈:)
Use React navigation themes built-in plugin.使用 React 导航主题内置插件。 If you use Expo, on iOS 13+ you can add the Appearance to detect preferred color scheme.如果您使用 Expo,在 iOS 13+ 上,您可以添加外观以检测首选配色方案。
const Navigation = createAppContainer(RootStack);
export default () => <Navigation theme="light" />;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.