Блог

Hii Я новичок в React Native и использую панель вкладок createMaterialTopTabNavigator, теперь я хочу добавлять иконки локально во вкладках, мой код

  const TabScreen = createMaterialTopTabNavigator(
 {
   Home: { screen: Home },
   Settings: { screen: Settings }
 });
  

У меня есть два класса name Home и Settings, также я создаю код для стилизации моих вкладок

 {
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
  activeTintColor: '#FFFFFF',
  inactiveTintColor: '#F8F8F8',
  style: {
    backgroundColor: '#633689',
  },
  labelStyle: {
    textAlign: 'center',
  },
  indicatorStyle: {
    borderBottomColor: '#87B56A',
    borderBottomWidth: 2,
  },
},}
  

Вы должны добавить на экран вкладки опцию навигации с помощью TabBarIcon,

  Home: {
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          //Your icon component for example => 
          <Icon name="home" size={30} color="#900" />
        )
      },
    }, 
  

и добавить showIcon: true в опции tabBarOptions,

 {
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {

 showIcon: true,
  activeTintColor: '#FFFFFF',
  inactiveTintColor: '#F8F8F8',
  style: {
    backgroundColor: '#633689',
  },
  labelStyle: {
    textAlign: 'center',
  },
  indicatorStyle: {
    borderBottomColor: '#87B56A',
    borderBottomWidth: 2,
  },
},}