如何使用 React Native 创建抽屉？答案

【问题标题】：how to create a drawer using React Native?如何使用 React Native 创建抽屉？
【发布时间】：2021-03-19 18:52:00
【问题描述】：

我想创建一个只出现在我的主屏幕上的抽屉，曾尝试使用 React Native 侧边菜单，但这只是将抽屉隐藏在后面，然后尝试使用 createdrawernavigator 但是我在stacknavigator中有一个bottomtabnavigator，并且一直坚持如何在此之上实现抽屉导航器下面是我的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>
  );
}

谁能指导我如何用一个抽屉导航器包裹我的“主页”，它有一个导航到登录屏幕的按钮？

已经卡了很久，任何线索都会很棒。

【问题讨论】：

如果你只想要一个屏幕上的抽屉，可以通过创建一个在屏幕外渲染的 aniamted.view 来解决，然后在切换按钮时将视图动画到视口中。或者如果你想嵌套一个抽屉，这里有很好的解释：reactnativeschool.com/master-react-navigation-v5
@ErikDreifaldt 能否请你写一些代码，我当然是动画 API 的新手，如果你能添加一些示例会很棒
查看下面的答案并在这里看看如何使用反应导航：reactnativeschool.com/master-react-navigation-v5

标签： reactjs react-native react-native-android react-navigation react-navigation-v5

【解决方案1】：

我最初的评论可能过于复杂。那些你希望有一个 TabBar 的屏幕；将它们放入bottomTabNavigator。带有抽屉的屏幕被放置到不同的抽屉导航器中；然后这些导航器嵌套在一个 stackNavigator 中，它包含您应用程序的其余屏幕。

// 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>
          );
        }

在屏幕调用之间导航：

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

我最初的评论可能过于复杂。可以在此处找到有关如何使用 bottomTabNavigator 而不是抽屉完成的示例： https://reactnavigation.org/docs/hiding-tabbar-in-screens/

【讨论】：