Question

我想向我的应用添加暗模式。但是文档令人困惑。是否有任何简单的方法来了解如何实现暗模式。我还希望深色模式在所有应用程序屏幕中保持活动状态。并且需要在ios和android中都实现该模式。我正在使用stacknavigator在多个屏幕之间导航。我尝试过一个世博项目无法取得令人满意的结果。任何帮助都会很好，谢谢。

Answer 1

（我的西班牙语不太好）

我向应用程序添加了暗模式。我使用React导航，样式化组件，样式化主题和React的API上下文：）

我的实现：

在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>

在其他屏幕的Config.js文件中，darkMode已启用/停用：

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

最后在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};
`

。。

如果您有任何疑问，请添加您的反馈意见：）

Answer 2

使用React导航主题内置插件。如果您使用的是Expo，则在iOS 13+上，您可以添加Appearance来检测首选的配色方案。

const Navigation = createAppContainer(RootStack);
export default () => <Navigation theme="light" />;

检查文档。 RN Themes

我如何在React Native App中实现黑暗模式

2 个答案: