web-dev-qa-db-ja.com

ネイティブのcreatebottomtabnavigatorに反応するタブバーのラベルを非表示にする

下部のラベルを非表示にする方法を知る必要があります。

私は以下を試しました：

tabBarShowLabels： 'hidden'、tabbarlabelvisible：false。

tabbarlabel: 'Home'も削除しましたが、それでも表示されます

何か助けていただければ幸いです。

enter image description here

import {createBottomTabNavigator} from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons'


const Tabs = createBottomTabNavigator ({
  Home:{
    screen: Home,
    navigationOptions:{
      tabBarIcon: ({ focused, tintcolor }) => (
        <Icon name="ios-home" size={24}  />
      )
    }
  },
  Inbox:{screen: Inbox,
    navigationOptions:{
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-mail" size={24} />
      )
    }
  },
  Search:{screen: Search,
    navigationOptions:{
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-search" size={24} />
      )
    }
  },
  Favorites:{screen: Favorites,
    navigationOptions:{ 
    tabBarIcon: ({ tintcolor }) => (
      <Icon name="ios-heart" size={24} />
    )
  }
  },
  Settings:{screen: Settings,
    navigationOptions:{ 
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-settings" size={24} />
      )
    }
  }

}
});



export default class App extends Component {
  render() {

    return <Tabs />
  }
}
reactjsreact-nativereact-navigation
5
obumoon

docs が言うように、showLabel: falseを定義する必要があります。

const Tabs = createBottomTabNavigator ({
  Home:{
    screen: Home,
    navigationOptions:{
      tabBarIcon: ({ focused, tintcolor }) => (
        <Icon name="ios-home" size={24}  />
      )
    }
  },
  ...
  ,
  Settings:{screen: Settings,
    navigationOptions:{
      tabBarIcon: ({ tintcolor }) => (
        <Icon name="ios-settings" size={24} />
      )
    }
  }

}
}, {
  tabBarOptions: { showLabel: false }
});
2
Jose Vf

上記の答えは完璧ですが、括弧を少し混乱させました。だから私のような新しい蜂のために、ここに適切なコードがあります。

const ProfileStack = createStackNavigator({
  Profile: SettingsScreen
});
ProfileStack.navigationOptions = {
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      title={'Profile'}
      name={focused ? 'tabIcon' : 'tabIconFocused'}
    />
  ),
  tabBarOptions: { showLabel: false }
};
1
Nouman Ghaffar