如何在createBottomTabNavigator中获取背景图片？

Question

我一直在尝试获取标签栏的背景图像。我尝试使用

tabBarComponent

但它隐藏了其下的选项卡。

我使用的代码是

   export default MainNavigation = createBottomTabNavigator(
    {
        Profile:{
            screen: Profile,
            navigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ focused, tintColor }) => {
                    return <Image source={require('./images/tab_explore.png')} />
                }
            }),
        }
    },

    {
        tabBarComponent: props =>{
            return(
                <View style={{backgroundColor:"black"}}> 
                <Image
                    style={{ width:'100%', height: 80 }}
                    source={ require('./images/bottom_btn.png')} />
                </View>
            );
        }
    })

有谁知道如何解决这个问题吗？预先感谢！

电流输出：

它应该在橙色顶部显示选项卡。

Answer 1

也许为时已晚，但我希望这个答案能帮助很多人。在 React Navigation 版本 2 中，你可以这样做：

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

如果您已经安装了“react-navigation”，则无需安装react-navigation-tabs。 然后通过

const TabBarComponent = (props) => (<BottomTabBar {...props} />);

创建TabBarComponent。您将在

tabBarComponent

中使用

createBottomTabNavigator

键。背景颜色：默认选项卡的“透明”，瞧！

下面的代码将为您提供主要思想

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>

        )
    }
})

Answer 2

我希望我可以发表评论，但我没有足够的声誉来这样做。

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

这对我有用。花了将近一天的时间来弄清楚

<ImageBackground>

的事情。

Answer 3

使用最新版本的“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>
        );
      },
    },
  );

Answer 4

我尝试过这个，它对我有用

const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveBackgroundColor: 'transparent',
        tabBarInactiveBackgroundColor: 'transparent',
        tabBarBackground: () => (
          <ImageBackground
            source={require('../../assets/bg/bg.png')}
            style={{flex: 1, backgroundColor: 'transparent'}}
          />
        ),
      }}>