如何在底部tabbar React导航中为每个选项卡使用自定义宽度

Question

我正在使用React Navigation V3，并且我的应用中有一个底部标签导航如下：

export default createBottomTabNavigator({
profile: {
    screen: ProfileUser,
    navigationOptions:{
      title : 'Profile',          
    }  
  },
  leaderboard :{
      screen : Leaderboard,
      navigationOptions:{          
      title : 'Leaderboard',       
    } 
  },
home :{
      screen : Homeboard, 
      navigationOptions:{
        title : 'Home',
        tabBarIcon: ({tintColor}) => (
          <BattleTabIcon              
              width={30}
              height={30}
          />
        ),        
      },  
  },
  store :{
      screen : AppStore,
      navigationOptions:{
        title : 'Store',
      }           
  },
  setting :{
    screen : Settings,
    navigationOptions:{
      title : 'Setting',     
    }           
},
},{
  tabBarOptions: {
      scrollEnabled : true,
      upperCaseLabel: false,
      activeTintColor: '#fff',
      activeBackgroundColor :'#1f1f3c',
      inactiveTintColor: '#8583a9',
      showLabel: false,
      style: {          
          backgroundColor: '#131332',
          height: 50,
          borderTopWidth: 2,
          borderTopColor: '#aeaeae',                      
      },      
      labelStyle: {
          fontSize: 12,
          fontFamily : 'Questrial-Regular',
          marginBottom: 5
      },
  },
  initialRouteName : 'home',

});

我有5个选项卡，我想为我的中心选项卡有更多的宽度，我也需要为每个选项卡上的边框，但我不知道该怎么做。

请帮助我的建议。

谢谢。

Answer 1

您总是可以创建一个自定义标签组件并自己执行：

const MainTabNavigator = TabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Tab2: {
    screen: EmptyTab,
  },
  Tab3: {
    screen: EmptyTab,
  }
}, {
  initialRouteName: 'Home',
  tabBarPosition: "bottom",
  tabBarComponent: props => {
    return <TabNavigation {...props}
    items={[
      {
        text: "Home", icon: { name: "home", type: "Entypo" },
        route: "Home"
      },
      {
        text: "Tab2", icon: { name: "data-usage", type: "MaterialIcons" },
        route: "Tab2",
        expand: true
      },
      {
        text: "Tab3", icon: { name: "package", type: "Octicons" },
        route: "Tab3"
      }
    ]}
    />
  }
});

，然后使用该项目的展开道具来控制样式。这是我的tabNavigation：

class TabNavigation extends React.PureComponent {
    route = (route) => {
        this.props.navigation.navigate(route);
    }
    render(){
        let tabs = this.props.items.map((item, index) => {
            let active = ((this.props.navigationState && this.props.navigationState.index === index) || (this.props.navigation && this.props.navigation.state && this.props.navigation.state.index === index));
            let icon, text = null;
            if (item.icon){
                let iconStyle = {
                    color: active ? this.props.theme.navBarTextColorActive : this.props.theme.navBarTextColor,
                    size: 23
                };
                if (item.icon.size)
                    iconStyle.fontSize = item.icon.size;
                if (item.icon.color)
                    iconStyle.color = item.icon.color;
                icon = this.props.getIcon(item.icon.type, item.icon.name, iconStyle.size, iconStyle.color);
            }
            if (item.text)
                text =  <Text active={active}>{item.text}</Text>;
            return (<TouchableOpacity key={index} onPress={() => this.route(item.route)} style={{flex: 1}}>
                    <View style={styles.buttonWrapper}>
                        {icon}
                        {text}
                    </View>
                </TouchableOpacity>)
        });
        if (tabs.length == 0)
        return null;
        else
        return (<NavBar>{tabs}</NavBar>)
       }
}

您需要在此处添加逻辑。