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

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

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

参考：

https://reaectnavigation.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

tabBarOptions下的 labelPosition似乎是为此设计的。

参考：

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

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

Answer 3

在图像中使用 alignself。

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