如何在特定屏幕中隐藏抽屉-React Navigation v3

时间:2020-10-21 18:29:56

标签: react-native react-navigation react-navigation-drawer

问题标题几乎说明了我想做什么。我有一个特定的屏幕“活动”,我想将抽屉隐藏在其中,但我想保留底部的标签导航器。以下是有关整个导航过程的代码。我正在开发反应导航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是一个类组件,它返回一个滚动视图,其中包含从在线服务器读取的类别。

0 个答案:

没有答案