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

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

labelPositionundertabBarOptions似乎就是为此而设计的。

参考：

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

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