问题标题几乎说明了我想做什么。我有一个特定的屏幕“活动”,我想将抽屉隐藏在其中,但我想保留底部的标签导航器。以下是有关整个导航过程的代码。我正在开发反应导航v3.11.0。
getUnAuthenticatedItems = () => (
{
Home: {
screen: AppStack('Homepage'),
params: { name: 'HomeL', icon: require('./images/home.png'), focusedIcon: require('./images/focusedHome.png') }
},
Activities: {
screen: AppStack('ActivitiesE'),
params: { name: 'ActivitiesL', icon: require('./images/activities.png'), focusedIcon: require('./images/focusedActivities.png') }
},
Calendar: {
screen: AppStack('CalendarE'),
params: { name: 'CalendarL', icon: require('./images/calendar.png'), focusedIcon: require('./images/focusedCalendar.png') }
},
Sadaqa: {
screen: AppStack('Donations'),
params: { name: 'Sadaka', icon: require('./images/sadaqa.png'), focusedIcon: require('./images/focusedSadaka.png') }
},
}
)
const UnAuthenticated = createBottomTabNavigator(
getUnAuthenticatedItems()
, {
defaultNavigationOptions: ({ navigation }) => {
const focusedStyle = { height: 40, width: 40 }
return {
tabBarLabel: Strings('App')[navigation.getParam('name')],
tabBarIcon: ({ focused, tintColor }) => (
<Image
source={focused ? navigation.getParam('focusedIcon') : navigation.getParam('icon')}
resizeMode="contain"
style={focused ? { tintColor: tintColor, ...focusedStyle } : { tintColor: tintColor }}
/>
),
}
},
initialRouteName: 'Home',
tabBarOptions: {
labelStyle: {
fontSize: 12,
},
style: { height: 62 },
activeTintColor: Color.primary,
inactiveTintColor: Color.lightGrey,
inactiveLabelStyle: { color: Color.lightGrey, fontFamily: 'SF Pro Text Regular', fontSize: 14, fontWeight: "normal" }
},
drawerBackgroundColor: 'rgba(255,255,255,0.9)',
}
)
const Drawer = createDrawerNavigator(
{
UnAuthenticated: {
screen: UnAuthenticated,
params: { general: true, hide: true }
},
}
, {
defaultNavigationOptions: ({ navigation }) => {
return {
drawerLockMode: 'locked-closed',
drawerLabel: navigation.getParam('name'),
drawerIcon: ({ tintColor }) => (
<Image
source={navigation.getParam('icon')}
resizeMode="contain"
style={{ tintColor: tintColor }}
/>
),
}
},
initialRouteName: 'UnAuthenticated',
contentComponent: UnAuthenticatedAppDrawer,
contentOptions: {
activeTintColor: Color.primary,
inactiveTintColor: Color.black,
inactiveLabelStyle: { color: Color.grey, fontFamily: 'SF Pro Text Regular', fontSize: 14, fontWeight: "normal" }
},
overlayColor: 'transparent',
drawerPosition: I18nManager.isRTL ? "right" : "left",
drawerBackgroundColor: Color.primary,
}
)
const InitialNavigator = createSwitchNavigator({
Splash: SplashScreen,
Visitor: Drawer,
});
contentComponent中的UnAuthenticatedAppDrawer是一个类组件,它返回一个滚动视图,其中包含从在线服务器读取的类别。