Как получить фоновое изображение в createBottomTabNavigator?

Может быть, уже слишком поздно, но я хочу, чтобы этот ответ помог многим людям. В React Navigation версии 2 это можно сделать так:

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

Вам не нужно устанавливать вкладки response-navigation-tabs, если вы установили response-navigation. Затем создайте TabBarComponent с помощью const TabBarComponent = (props) => (<BottomTabBar {...props} />);. Вы будете использовать ключ tabBarComponent в createBottomTabNavigator. BackgroundColor: «прозрачный» для вкладок по умолчанию и VOILA!

Следующий код даст вам основную идею

export const Tabs = createBottomTabNavigator({
    Posters: { 
        screen: Posters,
        navigationOptions: {
            tabBarLabel: 'AFİŞA',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name = "local-movies" size = {24} color = {tintColor} />
            )
        }
    },
    ComingSoon: { 
        screen: ComingSoon,
        navigationOptions: {
            tabBarLabel: 'TEZLİKLƏ',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name = "movie" size = {24} color = {tintColor} />
            )
        }
    },
    Tickets: { 
        screen: Tickets,
        navigationOptions: {
            tabBarLabel: 'BİLETLƏR',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name = "confirmation-number" size = {24} color = {tintColor} />
            ),

        }
    },
    More: { 
        screen: More,
        navigationOptions: {
            tabBarLabel: 'MENU',
            tabBarIcon: ({tintColor}) => (
                <MaterialIcons name = "more-horiz" size = {24} color = {tintColor} />
            ),
            tabBarOnPress: ({ navigation }) => {
                return <Text>sd</Text>
            }
        }
    },


}, 
{
    order: ['Posters', 'ComingSoon', 'Tickets', 'More' ],


    tabBarOptions: {
      activeTintColor: colors.darkYellow(),
      inactiveTintColor: 'white',
      labelStyle: {
        fontSize: 12,
        fontWeight: 'bold',
        fontFamily: defaults.fontFamily
      },
      style: styles.tabBar,
    },

    tabBarComponent: props =>{
        return(

            <React.Fragment>
                <TabBarComponent {...props} />
                <Image style = {styles.fakeTabBackground}/>
            </React.Fragment>

        )
    }
})

Хотел бы я комментировать, но у меня недостаточно репутации для этого.

<React.Fragment>
 <ImageBackground 
   source = {require('./images/bottom_btn.png')} 
   style = {{width: '100%', height: 80}}
 >
  <TabBarComponent {...props} />
 </ImageBackground>
</React.Fragment>

Это сработало для меня. Потратил почти день на выяснение этой штуки с <ImageBackground>.

С последней версией 'react-navigation-tabs' вышеуказанные решения не работают, что нам нужно сделать, мы должны явно передать следующие три свойства компоненту BottomTabBar:

 <BottomTabBar
    {...this.props}
    getButtonComponent = {this.getButtonComponent}
    getAccessibilityRole = {() => 'button'}
    getAccessibilityStates = {({focused}) => (focused ? ['selected'] : [])}
  />

Итак, полный код этого примера выглядит следующим образом:

 class TabBar extends React.Component {
  render() {
    return (
      <BottomTabBar
        {...this.props}
        getButtonComponent = {this.getButtonComponent}
        getAccessibilityRole = {() => 'button'}
        getAccessibilityStates = {({focused}) => (focused ? ['selected'] : [])}
      />
    );
  }

  getButtonComponent({route}) {
    if (route.key === 'Other') {
      return () => <View />; // a view that doesn't render its children
    } else {
      return null; // use the default nav button component
    }
  }
}

  const Tabs = createMaterialTopTabNavigator(
    {
      home: {
        screen: Home_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'home',
          tabBarIcon: ({tintColor}) => (
            <FontAwesome name = "home" size = {23} color = {tintColor} />
          ),
        }),
      },
      favourites: {
        screen: Favourites_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'favourites',
          tabBarIcon: ({tintColor}) => (
            <Ionicons name = "md-star" size = {25} color = {tintColor} />
          ),
        }),
      },
      calendar: {
        screen: Calendar_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'calendar',
          tabBarIcon: ({tintColor}) => (
            <Feather name = "calendar" size = {23} color = {tintColor} />
          ),
        }),
      },
      shoppingList: {
        screen: ShoppingList_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'shopping List',
          tabBarIcon: ({tintColor}) => (
            <Feather name = "shopping-bag" size = {23} color = {tintColor} />
          ),
        }),
      },
      profile: {
        screen: Profile_StackNavigator,
        navigationOptions: ({navigation}) => ({
          title: 'profile',
          tabBarIcon: ({tintColor}) => (
            <Feather name = "user" size = {23} color = {tintColor} />
          ),
        }),
      },
    },
    {
      tabBarPosition: 'bottom',
      swipeEnabled: false,
      animationEnabled: true,
      tabBarOptions: {
        showIcon: true,
        activeTintColor: Colors.DARK.ICON_ACTIVE,
        inactiveTintColor: Colors.DARK.ICON_INACTIVE,
        style: {
          backgroundColor: 'transparent',
        },
        labelStyle: {
          textAlign: 'center',
          fontSize: 10,
          textTransform: 'capitalize',
          color: Colors.DARK.ICON_INACTIVE,
          marginBottom: 1,
          width: 70,
        },
        indicatorStyle: {
          borderBottomColor: Colors.DARK.ICON_INACTIVE,
          borderBottomWidth: 2,
        },
      },
      tabBarComponent: (props) => {
        return (
          <React.Fragment>
            <ImageBackground
              source = {require('../../assets/images/image_bottom.jpg')}
              style = {{width: '100%', height: 60}}>
              <TabBar {...props} />
            </ImageBackground>
          </React.Fragment>
        );
      },
    },
  );