#react-native #redux #darkmode
Вопрос:
У меня есть один вопрос о 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
?
Спасибо всем вам за ваш ответ!
Комментарии:
1. Хорошо, я исправил эту проблему. Я проверяю, является ли тема светлой или темной, и отображаю вкладки на основе этого.