Как изменить цвет активной вкладки более чем на 2 цвета в реагирующей навигации

Question

Мне нужно изменить цвет фона значков вкладок на красный на главном экране, желтый на другой вкладке (список), синий на другой вкладке (разделе), пока я нажимаю на конкретную вкладку

В моем приложение имеет три вкладки нижнего колонтитула.

Мне нужно изменить цвет для каждой вкладки с другим цветом. Как мне этого добиться?

const HomeTabNavigator = createBottomTabNavigator({
  ListScreen,
  HomeScreen,
  SectionScreen,
}, {
  initialRouteName: 'HomeScreen',
  tabBarOptions: {
    activeTintColor: 'red',
    style: {
      paddingTop: 5,
      height: 65
    }
  }
});

Answer 1

Вы можете установить activeBackgroundColor и inactiveBackgroundColor, используя tabBarOptions Но все вкладки одинаковы.

Для создания разных вам необходимо настроить компоненты Tab. React Navigation v5 документы для TabBar Props.

Вот как сделать c tabBar

const MyTabBar = ({state, descriptors, navigation}) => {
  return (
    <View style={{flexDirection: 'row'}}>
      <View style={{backgroundColor: 'red'}}>
        <Text>One Tab</Text>
      </View>
      <View style={{backgroundColor: 'yellow'}}>
        <Text>Second Tab</Text>
      </View>
      <View style={{backgroundColor: 'blue'}}>
        <Text>Third Tab</Text>
      </View>
    </View>
  );
}

И файл маршрутизатора

<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>

</Tab.Navigator>

РЕДАКТИРОВАТЬ: для реагирования навигации v3;

const TabBarComponent = (props) => (<BottomTabBar {...props} />);
const TabScreens = createBottomTabNavigator(
  {
    tabBarComponent: props =>
      <TabBarComponent
        {...props}
        style={{ borderTopColor: '#605F60' }}
      />,
  },
);

Do c v3 tabBarComponent