答案 0 :(得分:6)
嘿,德鲁(Drew)感谢这个主意,我自己想不起来,但是我认为对于问题中的功能,您有很多多余的代码是不必要的。这是我对此的看法,而且效果也很好。
export const BottomTabNavigator = createBottomTabNavigator(
{
News: {
screen: NewsNavigator,
navigationOptions: {
tabBarIcon: ({ focused }: any) =>
focused ? <NewsIconActive /> : <NewsIcon />
}
},
Rewards: {
screen: RewardsNavigator,
navigationOptions: {
tabBarIcon: ({ focused }: any) =>
focused ? <RewardsIconActive /> : <RewardsIcon />
}
},
Home: {
screen: HomeNavigator,
navigationOptions: {
tabBarIcon: ({ focused }: any) =>
focused ? <HomeIconActive /> : <HomeIcon />
}
},
Leaderboard: {
screen: LeaderboardNavigator,
navigationOptions: {
tabBarIcon: ({ focused }: any) =>
focused ? <LeaderboardIconActive /> : <LeaderboardIcon />
}
},
Profile: {
screen: ProfileNavigator,
navigationOptions: {
tabBarIcon: ({ focused }: any) =>
focused ? <ProfileIconActive /> : <ProfileIcon />
}
}
},
{
initialRouteName: 'Profile'
},
navigationOptions: ({ navigation }) => ({
tabBarLabel: ({ focused }) => {
const { routeName } = navigation.state;
switch (routeName) {
case 'News':
return focused ? (
<Text>{routeName}</Text>
) : null;
break;
case 'Rewards':
return focused ? (
<Text>{routeName}</Text>
) : null;
break;
case 'Home':
return focused ? (
<Text>{routeName}</Text>
) : null;
break;
case 'Leaderboard':
return focused ? (
<Text >{routeName}</Text>
) : null;
break;
case 'Profile':
return focused ? (
<Text>{routeName}</Text>
) : null;
break;
default:
return null;
break;
}
}
})
}
);
答案 1 :(得分:2)
这个相当简单的解决方案在React Navigation的第5版中对我有用:
<Tab.Navigator
screenOptions={({ route, navigation }) => {
return { tabBarLabel: navigation.isFocused() ? route.name : '' };
}}
>
答案 2 :(得分:1)
我也遇到了麻烦,但是找到了可以帮助您的解决方案。在下面查看我如何配置tabBarIcon
和tabBarLabel
:
const MainNavigator = createBottomTabNavigator({
Home: HomeStack,
MyProsthetic: MyProstheticStack,
Appointments: AppointmentsStack,
MyNotes: MyNotesStack,
Contact: ContactStack,
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let icon;
switch(routeName) {
case 'Home':
tabBarLabel = true
return icon = <Icon name='home' size={30} color={focused ? Colors.darkBlue : Colors.lightGrey} />
case 'MyProsthetic':
return icon = <Icon name='user' size={28} color={focused ? Colors.darkBlue : Colors.lightGrey} />
case 'Appointments':
return icon = <IonIcon name='md-calendar' size={32} color={focused ? Colors.darkBlue : Colors.lightGrey} style={{position: 'relative', top: 3}}/>
case 'MyNotes':
return icon = <Icon name='file' size={23} color={focused ? Colors.darkBlue : Colors.lightGrey} />
case 'Contact':
return icon = <Icon name='phone' size={30} color={focused ? Colors.darkBlue : Colors.lightGrey} />
}
return icon
},
tabBarLabel: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let label;
switch(routeName) {
case 'Home':
return label = focused ? <Text style={styles.activeTabText}>Home</Text> : null
case 'MyProsthetic':
return label = focused ? <Text style={styles.activeTabText}>My Prosthetic</Text> : null
case 'Appointments':
return label = focused ? <Text style={styles.activeTabText}>Appointments</Text> : null
case 'MyNotes':
return label = focused ? <Text style={styles.activeTabText}>Notes</Text> : null
case 'Contact':
return label = focused ? <Text style={styles.activeTabText}>Contact</Text> : null
}
return label
},
}),
lazy: false,
tabBarOptions: {
style: {
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
borderTopWidth: 1,
borderTopColor: Colors.lightGrey
},
}
}
)
答案 3 :(得分:0)
tabBarLabel
成功了!
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={({ route }) => ({
tabBarIcon: ({ color }) => {
if (route.name === 'Home') {
return (<FontAwesomeIcon icon={faHome} size={25} color={color} />);
} else if (route.name === 'Location') {
return <FontAwesomeIcon icon={faMapMarker} size={25} color={color} />;
} else if (route.name === 'Alerts') {
return (<FontAwesomeIcon icon={faBell} size={25} color={color} />);
} else if (route.name === 'Store') {
return <FontAwesomeIcon icon={faStore} size={25} color={color} />;
} else if (route.name === 'Profile') {
return <FontAwesomeIcon icon={faUser} size={25} color={color} />;
}
},
tabBarLabel: ({ focused, color }) => {
let label;
switch (route.name) {
case 'Home':
return label = focused ? <Text style={{ color }}>Home</Text> : null
case 'Location':
return label = focused ? <Text style={{ color }}>Location</Text> : null
case 'Alerts':
return label = focused ? <Text style={{ color }}>Alerts</Text> : null
case 'Store':
return label = focused ? <Text style={{ color }}>Store</Text> : null
case 'Profile':
return label = focused ? <Text style={{ color }}>Profile</Text> : null
}
return label
}
})}
tabBarOptions={{ activeTintColor: 'blue', inactiveTintColor: 'gray' }}
>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Location" component={LocationStackScreen} />
<Tab.Screen name="Alerts" component={AlertsStackScreen} />
<Tab.Screen name="Store" component={StoreStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator>
</NavigationContainer >
答案 4 :(得分:-1)
在5.x版中,您可以仅使用“移位” [https://reactnavigation.org/docs/material-bottom-tab-navigator/#shifting][1],默认情况下仅对选项卡数量为true> 3
CALL apoc.create.addLabels
编辑:如前所述,这仅对材料底部的标签栏有效