javascript - 如何在本机应用程序中实现暗模式

Question

我想在我的应用程序中添加暗模式。但文件令人困惑。有什么简单的方法可以理解如何实现暗模式。我还希望暗模式在我的所有应用程序屏幕中保持活跃。并且需要在ios和android中实现模式。我正在使用 stacknavigator 在多个屏幕中导航。我曾尝试过一个世博项目无法取得令人满意的结果。任何帮助都会很好，谢谢。

Answer 1

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

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

检查文档。注册护士主题

Answer 2

（我的西班牙语不太好）

我在我的应用程序中添加了暗模式。我使用 React 的 react-navigation、styled-components、styled-theming 和 API Context :)

我的实现：

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

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>

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

. . .

如果您有任何问题，请添加您的反馈:)