React Native Navigation:只显示聚焦项目的选项卡标签

Question

我只是试图根据Tab导航器的项目是否聚焦来有条件地显示/隐藏它们的标签。我可以更改图标的色调，如下所示：

tabBarIcon: ({ focused }) => {
const icon = <Image
style={{
width: 25,
height: 25,
tintColor: focused ? colors.primary : colors.inactive
}}
source={require('./assets/account.png');}
/> ;
return icon

但是，尝试基于同一道具有条件地更改showLabel布尔值是行不通的？

tabBarOptions={{
activeTintColor: colors.primary,
inactiveTintColor: colors.inactive,
showLabel: ({ focused }) => {
return focused ? true : false
},

标签将显示在选项卡栏上的所有项目。

感谢任何/所有的帮助！

Answer 1

想明白了。

<Tab.Navigator 
screenOptions={({ route }) => ({
tabBarLabel: ({ focused }) => {
return <Text style={{fontSize: 14, fontWeight: '600', color: colors.primary}}>{focused ? route.name : ""}</Text>
},
tabBarIcon: ({ focused }) => {
let iconSource;
if (route.name === 'Map') {
iconSource = require('./assets/public.png');
} else if (route.name === 'List') {
iconSource = require('./assets/numbered.png');
} else if (route.name === 'Log') {
iconSource = require('./assets/menu.png');
} else if (route.name === 'Talk') {
iconSource = require('./assets/chat.png');
} else if (route.name === 'Account') {
iconSource = require('./assets/account.png');
} 
const icon = <Image
style={{
width: 25,
height: 25,
tintColor: focused ? colors.primary : colors.inactive,
marginTop: focused ? 5 : 15
}}
source={iconSource}
/> ;
return icon
},
})}
>

Answer 2

找到一个简单的解决方案，只需添加shifting道具或将其分配给true

<Tab.Navigator
...
shifting={true}
...
>

同样，仅在@react-navigation/material-bottom-tabs上进行了测试，因此不能保证在其他选项卡导航上进行测试。点击此处查看更多信息。