我自己制作了一个带有渐变背景的自定义TabBar和带有TabRouter的东西(因为你不能用TabNavigator制作一个吧?)。但我的一个标签是StackNavigator,它不会在屏幕顶部显示navBar。我是否需要手动将其添加到CustomTabView?
如果它是StackNavigator,ActiveScreen是否应该处理navBar?
const Tabs = TabRouter(
{
Main: {
// My StackNavigator which should have a navBar on top...
screen: StackNavigator({
Dashboard: {
screen: Dashboard,
title: 'Dashboard',
},
Wallet: { screen: Wallet },
Deck: { screen: Deck },
EnterpriseProfile: { screen: EnterpriseProfile },
}, {
initialRouteName: 'Dashboard',
}),
},
},
{
initialRouteName: 'Main',
swipeEnabled: false,
animationEnabled: false,
backBehavior: 'none',
},
);
const CustomTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
return (
<View style={{ flex: 1, paddingTop: Platform.OS === 'ios' ? 20 : 0 }}>
<ActiveScreen
navigation={addNavigationHelpers({
...navigation,
state: routes[index],
})}
/>
// My Custom TabBar because I don't want the default one from TabNavigator
<View style={styles.tabContainer}>
{routes.map(route => (
<TouchableOpacity key={route.routeName} onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })}
>
<TabItem />
</TouchableOpacity>
))}
</View>
</View>
);
};
const TabBar = createNavigationContainer(createNavigator(Tabs)(CustomTabView));
export default TabBar;