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

Question

我一直在尝试获取标签栏的背景图片。我尝试使用 "NOT_IMAGE: There was an error while trying to create this media item" ，但它隐藏了它下面的标签。

我使用的代码是

tabBarComponent

有谁知道如何解决这个问题？提前谢谢！

电流输出：

它应该显示橙色顶部的标签。

Answer 1

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

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

如果您已安装“反应导航”，则无需安装react-navigation-tab。 然后通过const TabBarComponent = (props) => (<BottomTabBar {...props} />);创建TabBarComponent。您将在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>

        )
    }
})

Answer 2

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

% make some sample data
N = 1000;
xv = linspace(-10,10,N);
yv = linspace(-10,10,N);
[XV,YV] = meshgrid(xv,yv);
ZV = XV.^2 + YV.^2;

% make into long vectors:
X = XV(:);
Y = YV(:);
Z = ZV(:);

% make x and y vector to interpolate z
N = 50; % size of new grid
xv = linspace(min(X), max(X), N); 
yv = linspace(min(Y), max(Y), N);
[XV,YV] = meshgrid(xv,yv);

% use griddata to find right Z for each x,y pair
ZV_grid = griddata(X,Y,Z,XV,YV);

% look at result
figure(); 
subplot(211)
imagesc(ZV);
subplot(212);
imagesc(ZV_grid)

这对我有用。花了将近一天的时间来弄清<React.Fragment> <ImageBackground source={require('./images/bottom_btn.png')} style={{width: '100%', height: 80}} > <TabBarComponent {...props} /> </ImageBackground> </React.Fragment> 的事情。

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>
        );
      },
    },
  );