reactjs - 自定义 React Navigation Dark 和 Light 主题未应用于子组件
问题描述
我在从反应导航传递自定义浅色或深色主题时遇到问题。主题的新定义对象项不会被覆盖,如下所示。我的目标是使用可以在每个组件中使用的自定义深色和浅色主题。但现在只显示默认值而不显示自定义值。
应用程序.js:
import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';
import Navigation from './components/Navigation.js';
const App = () => {
return (
<AppearanceProvider>
<Navigation />
</AppearanceProvider>
);
};
export default App;
在 Navigation 组件内部,我使用 navigationContainer 传递基于浅色或深色主题的主题道具。导航.js:
import React, { useState } from 'react';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import Login from './screens/Login.js';
const Navigation = props => {
//CUSTOM THEMES
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: '#b91c22',
primary: 'rgb(255, 45, 85)',
},
};
const MyThemeDark = {
...DarkTheme,
colors: {
...DarkTheme.colors,
background: 'green',
primary: 'rgb(255, 45, 85)',
},
};
//STATES
const [darkApp, setDarkApp] = useState(false);
//SET THE THEME
const appTheme = darkApp ? MyThemeDark : MyTheme;
//STYLE
const headerStyle = {
header: {
display: 'flex',
alignItems: 'center',
height: 0,
},
title: {
position: 'absolute',
top: 0,
fontWeight: '900',
fontSize: 30,
color: '#fff',
alignSelf: 'center',
},
};
return (
<NavigationContainer theme={appTheme}>
<Stack.Navigator headerMode='screen'>
<Stack.Screen
name='Login'
component={Login}
options={{
headerStyle: headerStyle.header,
headerTitleStyle: headerStyle.title,
title: 'Login',
}}
/>
</Stact.Navigator>
</NavigationContainer>
);
};
export default Navigation;
然后例如我想在按钮组件中获取覆盖的背景颜色,所以我使用 react-navigation 中的 useTheme 选项。但背景颜色不会覆盖默认颜色。我预计背景将具有颜色#b91c22,但它显示的是 rgb(240, 240, 240),我在这里做错了什么?
示例 Button.js:
import React from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { useColorScheme } from 'react-native-appearance';
import { useTheme } from '@react-navigation/native';
const Button = props => {
//PROPS
const {} = props;
//THEMES
const { colors } = useTheme();
let scheme = useColorScheme();
return (
<TouchableOpacity style={{ backgroundColor: colors.background }}>
<Text>Im Button</Text>
</TouchableOpacity>
);
};
export default Button;
解决方案
推荐阅读
- sonarqube - Sonarqube 显示覆盖百分比,但没有单元测试
- javascript - 未捕获的 ReferenceError:仅在电子上初始化之前无法访问“套接字”
- r - rbind 和 bind_rows 在 Mac 上不工作,但在 Windows 上工作
- amazon-web-services - AWS 海王星上的 Gremlin 查询超时
- css - 如何使用 CSS 网格与由一个 React 组件呈现的多个项目?
- ruby-on-rails - Rails cypress 的 CircleCI 配置
- flutter - 它不接受颤动的apiKey
- c# - 使用当前元素中的字段更新数组中的许多项目
- python - 循环中的 ActionChains 导致过时的元素引用
- bash - 将特殊字符传递给脚本,包括单引号、双引号等