Question

我在通过 react-navigation 传递自定义浅色或深色主题时遇到问题。一个主题的新定义的对象项不会被覆盖，如下所示。我的目标是使用我可以在每个组件中使用的自定义深色和浅色主题。但现在只显示默认值，而不显示自定义值。

App.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;

自定义 React Navigation Dark 和 Light 主题未应用于子组件

0 个答案: