Блог

У меня есть один вопрос о React Native. Я использую @react-navigation/bottom-tabs пакет для навигации снизу. Сегодня я реализовал смену темного режима для своего приложения. У меня есть одна проблема lt;Tab.Navigatorgt; . Проблема в том, что каждый вариант цвета определен внутри screenOptions . Можно ли передавать реквизит и изменять цвета в зависимости от темы, выбранной пользователем?

Позволь мне показать тебе, что мне нужно. Когда у меня включен темный режим, все приложение выглядит так:

Когда я устанавливаю режим освещения, приложение выглядит следующим образом:

Мне просто нужно изменить цвет нижней панели на белый, а значки на черный в режиме освещения. Возможно ли это вообще?

Мой код здесь:

 const Tab = createBottomTabNavigator(); export default function MainContainer(){  const theme = useSelector((state) =gt; state.themeReducer.theme);  return(  lt;ThemeProvider theme={theme}gt;  lt;NavigationContainergt;  lt;Tab.Navigator  initialRouteName={skolboz}  screenOptions={({route}) =gt; ({  tabBarIcon: ({focused, color, size}) =gt; {  let iconName;  let rn = route.name;   if (rn === skolboz) {  iconName = focused ? 'home' : 'home-outline'  } else if (rn === newCase){  iconName = focused ? 'add' : 'add-outline'  } else if (rn === settings){  iconName = focused ? 'settings' : 'settings-outline'  }    return lt;Ionicons name={iconName} size={size} color={color} /gt;  },  "tabBarActiveTintColor": "orange",  "tabBarInactiveTintColor": "#FFF",  "tabBarActiveBackgroundColor": "#000",  "tabBarInactiveBackgroundColor": "#000",  "tabBarLabelStyle": {  "fontSize": 10  },  "tabBarStyle": [  {  "display": "flex",  "borderTopWidth": 0,  "backgroundColor": "#000"  },  null  ],  "headerStyle": [  {  "backgroundColor": "orange",  }  ],  })}  gt;   lt;Tab.Screen name={skolboz} component={Skolboz} options={{headerTitle: 'SKOLBOZ', headerTintColor: "white"}} /gt;  lt;Tab.Screen name={newCase} component={NewCase} options={{headerTitle: 'Pridať nový nedostatok', headerTintColor: "white"}} /gt;  lt;Tab.Screen name={settings} component={Settings} options={{headerTitle: 'Nastavenia', headerTintColor: "white"}} /gt;   lt;/Tab.Navigatorgt;  lt;/NavigationContainergt;  lt;/ThemeProvidergt;  ) }  

Я использую redux для изменения цвета в зависимости от темы приложения. Передача реквизита, подобного этому:

 ${props =gt; props.theme.PRIMARY_BACKGROUND_COLOR};  

Как я могу сделать ту же логику внутри screenOptions ?

Спасибо всем вам за ваш ответ!