how to create a drawer using React Native?

假装没事ソ 提交于 2021-02-11 14:25:11

问题


I want to create a drawer that appears only on my homescreen, had tried using React Native side menu but that just hides the drawer behind then tried using createdrawernavigator but I have a bottomtabnavigator inside stacknavigator, and am stuck on how to implement drawer navigator on top of that below is my navigation.js

const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const AuthStack = createStackNavigator();
// const Drawer = createDrawerNavigator();
function AuthNavigator() {
  function LogoTitle(props) {
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          marginVertical: 10,
        }}>
        <Image
          style={{width: 31.44, height: 31.2}}
          source={Images.symptomcheck_bot1}
        />
        <Text
          style={{
            marginLeft: 10,
            color: '#FFFFFF',
            fontStyle: 'italic',
            fontSize: 14,
          }}>
          {props.children}
        </Text>
      </View>
    );
  }
  return (
    <AuthStack.Navigator initialRouteName="login">
      <AuthStack.Screen
        name="login"
        component={LoginScreen}
        options={{headerShown: false}}
      />
      <AuthStack.Screen
        name="otp"
        component={OtpScreen}
        options={{headerShown: false}}
      />

      <AuthStack.Screen name="addchild" component={AddChild} />

      <AuthStack.Screen
        name="acceptinvitescreen"
        component={AcceptInviteScreen}
      />
      <AuthStack.Screen
        name="Home"
        component={BottomTabBar}
        options={{
          headerShown: false,
        }}
      />
      <AuthStack.Screen
        name="online"
        component={OnlineConsultationWebviewScreen}
      />

      <AuthStack.Screen
        name="actual"
        component={ActualConsultationWebviewScreen}
      />
      <AuthStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
      <AuthStack.Screen name="vaccinelist" component={VaccinationListScreen} />
      <AuthStack.Screen
        name="vaccinationdetail"
        component={VaccinationDetailScreen}
      />
      <AuthStack.Screen
        name="vaccinereadmore"
        component={VaccinationDetailreadMoreScreen}
      />
      <AuthStack.Screen
        name="symptomChecker"
        component={SymptomChecker}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Symptom Checker',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <AuthStack.Screen
        name="symptomCheckerSearch"
        component={SymptomCheckerSearch}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <AuthStack.Screen
        name="symptomCheckerQA"
        component={SymptomCheckerQA}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <AuthStack.Screen
        name="symptomCheckerAssessmentReport"
        component={symptomCheckerAssessmentReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Assessment Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <AuthStack.Screen
        name="symptomCheckerDetailReport"
        component={SymptomCheckerDetailReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Detail Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -100 : 50,
          },
        }}
      />
      <AuthStack.Screen
        name="plactivityplanner"
        component={PLActivityPlanner}
        options={{headerShown: false}}
      />
      <AuthStack.Screen
        name="plactivityplannerdetail"
        component={PLActivityPlannerDetail}
        options={{headerShown: false}}
      />
      <AuthStack.Screen
        name="plactivityplannerreport"
        component={PLActivityPlannerReport}
        options={{headerShown: false}}
      />
      <AuthStack.Screen
        name="todaysgoal"
        component={TodaysGoalScreen}
        options={{headerShown: false}}
      />
      <AuthStack.Screen
        name="mealdesc"
        component={MealDescriptionScreen}
        options={{headerShown: false}}
      />
      <AuthStack.Screen
        name="nutritionassessment"
        component={NutritionAssessment}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Nutrition Assessment',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 20,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <AuthStack.Screen
        name="nutritionassessmentreport"
        component={NutritionAssessmentReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'NutriCheck',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 20,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
    </AuthStack.Navigator>
  );
}

function BottomTabBar() {
  return (
    <Tab.Navigator
      lazy={false}
      initialRouteName="Home"
      tabBarOptions={{
        labelStyle: {
          color: '#FF1493',
          fontSize: 12,
        },
      }}>
      <Tab.Screen
        name="Home"
        // uncommnet below line to see new Home Tab
        component={HomeTabScreen}
        // uncomment below see old Home Tab
        // component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({color, size}) => (
            <MaterialIcon name="home" color="#FF1493" size={30} />
          ),
        }}
      />
      <Tab.Screen
        name="Consult"
        component={ConsultationHomeScreen}
        initialParams={{
          uri: 'https://qa.parentlane.com/doctors/launch-home?app_type=0',
        }}
        options={{
          tabBarLabel: 'Consult',
          tabBarIcon: ({color, size}) => (
            <FontAwesomeIcon name="stethoscope" color="#FF1493" size={30} />
          ),
        }}
      />
      <Tab.Screen
        name="Plans"
        component={PlansTabScreen}
        options={{
          tabBarLabel: 'Plans',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="crown-outline"
              color="#FF1493"
              size={30}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Chat"
        component={ChatTabScreen}
        options={{
          tabBarLabel: 'Chat',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="chat-outline"
              color="#FF1493"
              size={30}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}
function RootNavigator() {
  function LogoTitle(props) {
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          marginVertical: 10,
        }}>
        <Image
          style={{width: 31.44, height: 31.2}}
          source={Images.symptomcheck_bot1}
        />
        <Text
          style={{
            marginLeft: 10,
            color: '#FFFFFF',
            fontStyle: 'italic',
            fontSize: 14,
          }}>
          {props.children}
        </Text>
      </View>
    );
  }
  return (
    <RootStack.Navigator initialRouteName="Home">
      <RootStack.Screen
        name="Home"
        component={BottomTabBar}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="online"
        component={OnlineConsultationWebviewScreen}
      />
      <RootStack.Screen
        name="actual"
        component={ActualConsultationWebviewScreen}
      />
      <RootStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
      <RootStack.Screen name="vaccinelist" component={VaccinationListScreen} />
      <RootStack.Screen
        name="vaccinationdetail"
        component={VaccinationDetailScreen}
      />
      <RootStack.Screen
        name="vaccinereadmore"
        component={VaccinationDetailreadMoreScreen}
      />
      <RootStack.Screen
        name="symptomChecker"
        component={SymptomChecker}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Symptom Checker',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerSearch"
        component={SymptomCheckerSearch}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerQA"
        component={SymptomCheckerQA}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerAssessmentReport"
        component={symptomCheckerAssessmentReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Assessment Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="symptomCheckerDetailReport"
        component={SymptomCheckerDetailReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Detail Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -100 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="plactivityplanner"
        component={PLActivityPlanner}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="plactivityplannerdetail"
        component={PLActivityPlannerDetail}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="plactivityplannerreport"
        component={PLActivityPlannerReport}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="todaysgoal"
        component={TodaysGoalScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="mealdesc"
        component={MealDescriptionScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="nutritionassessment"
        component={NutritionAssessment}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Nutrition Assessment',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 20,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="nutritionassessmentreport"
        component={NutritionAssessmentReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'NutriCheck',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 20,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="developmentscreening"
        component={DevelopmentScreeningInfo}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="login"
        component={LoginScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="otp"
        component={OtpScreen}
        options={{headerShown: false}}
      />
    </RootStack.Navigator>
  );
}
// function DrawerRootNavigator() {
//   return (
//     <Drawer.Navigator>
//       <Drawer.Screen name="Home" component={RootNavigator} />
//     </Drawer.Navigator>
//   );
// }
// function DrawerAuthNavigator(){
//   return(
//     <Drawer.Navigator>
//       <Drawer.Screen name="login" component={AuthNavigator}/>
//     </Drawer.Navigator>
//   )
// }
export default function SwitchRootNavigator(props) {
  const signedIn = props.signedIn;
  return (
    <NavigationContainer>
      {signedIn != null &&
      signedIn != undefined &&
      signedIn != '' &&
      signedIn != {} ? (
        <RootNavigator />
      ) : (
        <AuthNavigator />
      )}
    </NavigationContainer>
  );
}

Could anyone please guide me how do I wrap my "Home" with a drawernavigator which would have a button navigating to the login screen?

have been stuck since long, any leads would be great.


回答1:


I might have overcomplicated things in my initial comment. Those screens you would like to have a TabBar on; put those into a bottomTabNavigator. Screens with drawer on are placed into a different drawerNavigator; and these navigators are then nested in a stackNavigator which holds the rest of the screens of your app.

// Navigators
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

    // screens you want bottom tabs on
        function TabScreens() {
          return (
            <Tab.Navigator>
              <Tab.Screen name="A" component={A} />
              <Tab.Screen name="B" component={B} />
            </Tab.Navigator>
          );
        }
    
    // screens you want drawer on
        function DrawerScreens() {
          return (
            <Drawer.Navigator>
              <Drawer.Screen name="C" component={C} />
              <Drawer.Screen name="D" component={D} />
            </Tab.Navigator>
          );
        }
        
    // and both Drawer and Tabs are then nested into Stack
        function App() {
          return (
            <Stack.Navigator>
              <Stack.Screen name="Home" component={TabScreens} />
              <Stack.Screen name="Drawer" component={DrawerScreens} />
              <Stack.Screen name="E" component={E} />
              <Stack.Screen name="F" component={F} />
              <Stack.Screen name="G" component={G} />
            </Stack.Navigator>
          );
        }

To navigate between the screens call:

navigation.navigate("navigatorName",{screen: "screenName"})

I might have overcomplicated things in my initial comment. Example on how it is done with bottomTabNavigator instead of a drawer can be found here: https://reactnavigation.org/docs/hiding-tabbar-in-screens/



来源:https://stackoverflow.com/questions/65199120/how-to-create-a-drawer-using-react-native

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!