在react native中更改整个应用的颜色

xqnpmsa8 于 2022-11-30 发布在 React

关注(0)|答案(1)|浏览(343)

我想通过在react native中使用switch按钮来启用react native应用中的黑暗模式。请指导我如何实现。我不能在颜色文件中使用挂钩。下面是我的颜色文件：

const lightMode={
    ........
    TextColor1: '#FFFFFF',
    buttonColor1: '#FFFFFF',
    borderColor1: '#3CB3FF',
    ........
}
const DarkMode={
    ........
    TextColor1: '#424242',
    buttonColor1: '#3CB3FF',
    borderColor1: '#3CB3FF',
    ........
}

let theme = 'light'
let colors = theme == 'light' ? { ...lightMode} : { ...DarkMode}

如何使用开关更改上述主题
如何在react native中使用您自己的颜色启用深色模式。

react-native

来源：https://stackoverflow.com/questions/74598288/change-colors-of-the-whole-app-in-react-native

1条答案

按热度按时间

kzipqqlq1#

我曾经实现过黑暗主题。但我没有添加按钮来启用黑暗模式，但它会根据手机外观自动更改。
因此，为了实现暗模式，我使用了[useColorScheme]。
useColorScheme React钩子提供并订阅Appearance模块的配色方案更新，这样我们就可以得到当前主题是亮还是暗。

以下是代码示例：

在颜色文件中 *：（也许，我会将其定义为theme.js）

theme.js

export const Theme = {
   light: {
     ........
     TextColor1: '#FFFFFF',
     buttonColor1: '#FFFFFF',
     borderColor1: '#3CB3FF',
     ........       
   },
   dark: {
     ........
     TextColor1: '#424242',
     buttonColor1: '#3CB3FF',
     borderColor1: '#3CB3FF',
     ........
   },
}

在屏幕中：

home.js

import {useColorScheme} from 'react-native';
import {Theme} from './theme';

export const HomeScreen = ({}) = > {
   const colorTheme = useColorScheme();
   const theme = Theme[colorTheme];
   ...       
   return (
     <View>
       <Text style={theme.TextColor1}> Hello World! </Text>
       <Button color={theme.buttonColor1}> Click </Button>
     </View>
   );
}

希望这能帮助您解决问题。

赞(0）回复(0）举报 2022-11-30

我来回答

在react native中更改整个应用的颜色

1条答案

相关问题

热门标签

最新问答