1

我正在开发一个应用程序，我在主屏幕上提供了一个底部选项卡。我已经成功实现了导航到多个屏幕的底部导航。但是，我想从底部标签之一打开一个侧抽屉。

这是我到目前为止所做的：

const Drawer = createDrawerNavigator(
  { DrawerScreen: { screen: SideDrawer } },
  { drawerPosition: "right", drawerWidth: 300 }
);

const mainBottomStack = createBottomTabNavigator(
  {
    Home: mainStack,
    MedicalRecord: MedicalRecordStack,
    //MedicalRecord: PatientDetails,
    Visit: VisitStack,
    Alerts: AlertStack,
    Profile: PatientDetails,
    Settings: Drawer // This tabs is navigates to drawer
  },
  {
    transitionConfig,
    initialRouteName: "Home",
    barStyle: { backgroundColor: "#694fad" },
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) =>
        navigation.state.routeName == "Home" ? (
          <Image
            source={require("../images/BottomMenu/Home.png")}
            style={{ opacity: focused ? 1 : 0.5, width: 23, height: 23 }}
          />
        ) : navigation.state.routeName == "MedicalRecord" ? (
          <Image
            source={require("../images/BottomMenu/Medicalhistory.png")}
            style={{ opacity: focused ? 1 : 0.5, width: 23, height: 23 }}
          />
        ) : navigation.state.routeName == "Profile" ? (
          <Image
            source={require("../images/BottomMenu/avatar-dark.png")}
            style={{ opacity: focused ? 1 : 0.5, width: 23, height: 23 }}
          />
        ) : navigation.state.routeName == "Visit" ? (
          <Image
            source={require("../images/BottomMenu/CalenderVisit.png")}
            style={{ opacity: focused ? 1 : 0.5, width: 23, height: 23 }}
          />
        ) : navigation.state.routeName == "Alerts" ? (
          <Image
            source={require("../images/BottomMenu/Notificationbell.png")}
            style={{ opacity: focused ? 1 : 0.5, width: 23, height: 23 }}
          />
        ) : navigation.state.routeName == "Settings" ? (
          <Image
            source={require("../images/BottomMenu/menubar.png")}
            style={{ opacity: focused ? 1 : 0.5, width: 23, height: 23 }}
          />
        ) : null
    }),
    tabBarOptions: {
      showIcon: true,
      activeTintColor: "grey",
      inactiveTintColor: "gray",
      activeBackgroundColor: "white",
      inactiveBackgroundColor: "white",
      horizontal: false,
      labelStyle: {
        fontSize: 9
      },
      style: {
        backgroundColor: styles.themeColor.color,
        borderTopWidth: 0
        // height:50
      }
    }
  }
);

我面临的问题是当我触摸打开抽屉时，整个抽屉上的视图打开，它看起来不像抽屉，看起来更像是没有标题的屏幕。

我在这里做错了什么？

4

0 回答 0