Question

我正在尝试在我的一个项目中为选项卡导航器实现行方式图标和标签。我可以根据默认设置设置图标和标签，但我希望图标位于左侧，标签位于右侧而不是顶部的图标和底部的标签。

这是我的代码：

export const InnerTab = TabNavigator({
Map: {
    screen: MapStack,
    navigationOptions: {
          tabBarLabel: 'Map',
          tabBarIcon:  (
                <Image source={require('../logos/map.png')}
                       style={[styles.innerTabIcon, {color: '#ffffff'}]}
                />
          )
    },
},
List: {
    screen: ListStack,
    navigationOptions: {
          tabBarLabel: 'List',
          tabBarIcon:  (
                <Image source={require('../logos/list.png')}
                       style={[styles.innerTabIcon, {color: '#ffffff'}]}
                />
          )
    },
},
},
{
tabBarPosition: 'top',
animationEnabled: false,
swipeEnabled:false,
lazy:true,
tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'#77909F',
tabStyle:{
  marginTop:(Platform.OS === 'ios') ? 0 : 0,
  height : 40,

},
 indicatorStyle: {
    backgroundColor : '#2394C7',
    height :(Platform.OS === 'ios') ? 53 :  63,
  },

 style :{
     backgroundColor:'#77909F'
 },
labelStyle: {
    fontSize: 18,
    fontWeight:'bold',
     marginTop: 0,
     color :'#ffffff'
},
},
});

我已经浏览了文档，但没有找到。但尝试了一些方法，但没有工作。

有什么方法可以实现吗？

Answer 1

您可以在flexDirection:'row'下将tabStyle添加到tabBarOptions。

参考：

https://reactnavigation.org/docs/navigators/tab

tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'#77909F',
tabStyle:{
  marginTop:(Platform.OS === 'ios') ? 0 : 0,
  height : 40,
  flexDirection: 'row'
},

Answer 2

在图标的图像样式中使用alignself。

Screen4: {
      screen: WalletScreen,
      navigationOptions: {
        tabBarLabel: 'Wallet',
        tabBarIcon: () => (
          <Image
            source={require('./Images/wallet2.png')}
            style={{
              width: 40,
              height: 40,
              alignSelf: 'center',
            }}
          />
        ),
      },

Answer 3

labelPosition下的

tabBarOptions似乎是为此目的而设计的。

参考：

https://reactnavigation.org/docs/bottom-tab-navigator#labelposition

  tabBarOptions={{
    activeTintColor: 'blue',
    inactiveTintColor: 'gray',
    labelPosition: 'beside-icon',
  }}

如何在选项卡导航器中并排显示图标和标签

3 个答案: