タブナビゲータでサイドバイサイドのアイコンとラベルを取得する方法

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です。

参考：@DennisFreaたくさん

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' 
},