我需要知道如何隐藏底部标签。
我尝试了以下操作:
tabBarShowLabels:“隐藏”,tabbarlabelvisible:否。
我还删除了tabbarlabel: 'Home'
,它仍然显示
我们将不胜感激,或者如果有人可以将我指出正确的方向,那么
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 />
}
}
答案 0 :(得分:4)
您必须按照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 }
});
答案 1 :(得分:2)
在新版本的React Navigation中,您只需将showLabel
属性传递为false
<Tab.Navigator tabBarOptions={{ showLabel: false }}>
答案 2 :(得分:1)
以上答案是完美的,但它使括号有些混乱。所以对于像我这样的新蜜蜂,这是正确的代码。
const ProfileStack = createStackNavigator({
Profile: SettingsScreen
});
ProfileStack.navigationOptions = {
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
title={'Profile'}
name={focused ? 'tabIcon' : 'tabIconFocused'}
/>
),
tabBarOptions: { showLabel: false }
};
答案 3 :(得分:0)
对于react-navigation v4,请将labeld属性设置为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} />
)
}
}
}
}, {labeled:false});