我在 App.js 文件夹中创建了一个 BottomTabNavigator
。导航器工作正常,但它显示在我应用程序的每个屏幕上。如何更改它,使其仅显示在 BottomTabNavigator
中列出的屏幕上?
示例:我想隐藏 BottomTabNavigator
中的 ExampleScreen
。
这是我在 App.js 中的内容:
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const DrawerNavigator = () =>{
return (
<Drawer.Navigator initialRouteName="MainScreen" drawerType='slide'
drawerStyle={{paddingTop: 15}}
>
<Drawer.Screen name="MainScreen" component={MainScreen}/>
<Drawer.Screen name="ScreenOne" component={ScreenOne} />
</Drawer.Navigator>
);
}
const BottomTabNavigation = () => {
return(
<Tab.Navigator
screenOptions={ ({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
if(route.name === 'Home'){
iconName = 'home'
} else if(route.name === 'Advices') {
iconName = 'zap'
} else if(route.name === 'Tasks'){
iconName = 'check-square'
} else if(route.name === 'Time'){
iconName = 'clock'
} else if(route.name === 'Reminders'){
iconName = 'book-open'
}
return <Feather name={iconName} size={26} color={color} />
}
})}
tabBarOptions={{
activeTintColor: colors.dark,
inactiveTintColor: colors.midGrey
}}
>
<Tab.Screen name='Home' component={DrawerNavigator} />
<Tab.Screen name='Advices' component={GoodJobScreen} />
<Tab.Screen name='Tasks' component={ChecklistScreen} />
<Tab.Screen name='Time' component={ScreenTwo}/>
<Tab.Screen name='Reminders' component={CardExtendedScreen} />
</Tab.Navigator>
)
};
return (
<SafeAreaProvider>
<NavigationContainer >
<Stack.Navigator
screenOptions={{
headerShown: false}}
initialRouteName="MainScreen">
<Stack.Screen name="MyTabs1" component={TabNavigator} />
<Stack.Screen name="MyTabs2" component={ScreenTwo} />
<Stack.Screen name="MyTabs3" component={ScreenThree} />
<Stack.Screen name="ExampleScreen" component={ExampleScreen}/>
<Stack.Screen name="MainScreen" component={BottomTabNavigation}/>
<Stack.Screen name="ChecklistScreen" component={ChecklistScreen} />
<Stack.Screen name="CardExtendedScreen" component={CardExtendedScreen} />
<Stack.Screen name="CardExtendedScreen2" component={CardExtendedScreen2} />
<Stack.Screen name="CardExtendedScreen3" component={CardExtendedScreen3} />
<Stack.Screen name="TopBar" component={TopBar} />
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
);
};
AppRegistry.registerComponent('Application', () => App);