你能给 React Native 中的 bottomTabNavigator 一个深色模式背景色和一个浅色模式背景色吗答案

【问题标题】：Can you give bottomTabNavigator in React Native a dark mode background color and a light mode background color你能给 React Native 中的 bottomTabNavigator 一个深色模式背景色和一个浅色模式背景色吗
【发布时间】：2021-12-23 01:20:49
【问题描述】：

我正在尝试使我的底部选项卡导航器暗模式兼容....但是它似乎忽略了首先给出的颜色，只是将#111827 用于明暗模式，所以我最终只有一个深色背景底部标签。它不会抛出任何错误。

export default function MainNavigator() {
const colorMode = useColorMode();
  return (
      <Tab.Navigator
        initialRouteName="Daily Care"
        screenOptions={({ route, colorMode }) => ({
          tabBarIcon: ({ focused, color }) => {
            let iconName;

            if (route.name === 'Daily Care') {
              return <IconDailyCare color={color} />
            } else if (route.name === 'Learning') {
              return <IconLearning color={color} />
            } else if (route.name === 'Check-In') {
              return <IconCheckIn color={color} />
            } else if (route.name === 'Account') {
              return <IconAccount color={color} />
            }
          },
          tabBarActiveTintColor: "#F4AC94",
          tabBarInactiveTintColor: "#80A1AC",
          headerShown: false,
          tabBarStyle: {
            backgroundColor: colorMode === 'light' ? '#fff' : '#111827',
            borderTopColor: colorMode === 'light' ? '#fff' : '#111827',
          },

        })}
      >

我正在使用 nativebase，这是 useColorMode() 挂钩的来源。

【问题讨论】：

标签： react-native expo native-base

【解决方案1】：

从 'react-native' 导入 { useColorScheme }；

常量方案 = useColorScheme();

方案 === '黑暗' ?背景颜色1：背景颜色2

【讨论】：