React Native 如何在选项卡导航器中获得并排的图标和标签

cbwuti44 于 2023-01-05 发布在 React

关注(0)|答案(3)|浏览(138)

我正试图实现在我的一个项目中的标签导航行式图标和标签。我可以设置图标和标签根据默认设置，但我希望图标在左侧和标签在右侧，而不是作为图标在顶部和标签在底部。
这是我的代码：

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

我已经看过了文件，但没有找到。但尝试了几种方法，但没有工作。
有什么办法可以实现它吗？

react-native

来源：https://stackoverflow.com/questions/47771421/how-to-get-side-by-side-icon-and-label-in-tab-navigator

3条答案

按热度按时间

exdqitrt1#

您可以将flexDirection:'row'添加到tabBarOptions下的tabStyle。
参考：
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'
},

赞(0）回复(0）举报 2023-01-05

ars1skjm2#

tabBarOptions下的labelPosition似乎就是为此设计的。
参考：
https://reactnavigation.org/docs/bottom-tab-navigator#labelposition

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

赞(0）回复(0）举报 2023-01-05

axkjgtzd3#

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

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

赞(0）回复(0）举报 2023-01-05

我来回答

React Native 如何在选项卡导航器中获得并排的图标和标签

3条答案

相关问题

热门标签

最新问答