如何在反应原生的抽屉导航中创建自定义选项卡？

Question

我已经创建了自定义抽屉，但我想删除开始、主页、登录屏幕。但是当我删除道具时，我得到了错误。我只想把我的cutm抽屉里的东西放在抽屉里，

   This error is located at:
 in DrawerItemList (at Navigation.js:19)
 in RCTView (at View.js:34)
 in View (at ScrollView.js:1124)
 in RCTScrollView (at ScrollView.js:1260)
 in ScrollView (at ScrollView.js:1286)
 in ScrollView (at DrawerContentScrollView.tsx:20)
 in DrawerContentScrollView (at Navigation.js:18)
 in CustomDrawerContent (at Navigation.js:43)
 in RCTView (at View.js:34)
 in View (at createAnimatedComponent.js:240)
 in AnimatedComponent(View) (at Drawer.tsx:695)
 in RCTView (at View.js:34)
 in View (at createAnimatedComponent.js:240)
 in AnimatedComponent(View) (at Drawer.tsx:628)
 in PanGestureHandler (at GestureHandlerNative.tsx:13)
 in PanGestureHandler (at Drawer.tsx:619)
 in DrawerView (at DrawerView.tsx:215)
 in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
 in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
 in SafeAreaProviderCompat (at DrawerView.tsx:213)
 in GestureHandlerRootView (at GestureHandlerRootView.android.js:31)
 in GestureHandlerRootView (at DrawerView.tsx:212)
 in DrawerView (at createDrawerNavigator.tsx:47)
 in DrawerNavigator (at Navigation.js:36)
 in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
 in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
 in ThemeProvider (at NavigationContainer.tsx:90)
 in ForwardRef(NavigationContainer) (at Navigation.js:35)
 in AppDrawer (at App.js:25)
 in App (at renderApplication.js:45)
 in RCTView (at View.js:34)
 in View (at AppContainer.js:106)
 in RCTView (at View.js:34)
 in View (at AppContainer.js:132)
 in AppContainer (at renderApplication.js:39)

这是我的代码：

       import * as React from 'react';
       import {
        createDrawerNavigator,
        DrawerContentScrollView,
        DrawerItemList,
       DrawerItem, 
       } from '@react-navigation/drawer';
      import {NavigationContainer} from '@react-navigation/native';
    
      import GetStarted from '../screens/GetStarted';
      import SignIn from '../screens/SignIn';
      import SignUp from '../screens/SignUp';
      import Home from '../screens/Home';
      import Appointment from '../screens/Appointment';
    
     function CustomDrawerContent() {
      return (
        <DrawerContentScrollView>
          <DrawerItemList />
          <DrawerItem label="Profile" onPress={() => navigation.closeDrawer()} />
          <DrawerItem
            label="Contact Us"
            onPress={() => navigation.toggleDrawer()}
          />
          <DrawerItem label="About" onPress={() => navigation.closeDrawer()} />
          <DrawerItem label="Logout" onPress={() => navigation.toggleDrawer()} />
         </DrawerContentScrollView>
        );
       }
    
      const Drawer = createDrawerNavigator();
    
     export default function AppDrawer() {
      return (
        <NavigationContainer>
          <Drawer.Navigator
            drawerType="back"
            drawerStyle={{
              backgroundColor: '#fce1e6',
              width: 240,
            }}
            initialRouteName="Home"
            drawerContent={() => <CustomDrawerContent />}>
            <Drawer.Screen
              name="GetStarted"
              component={GetStarted}
              options={{gestureEnabled: false}}
            />
            <Drawer.Screen
              name="SignIn"
              component={SignIn}
              options={{gestureEnabled: false}}
            />
            {/* <Drawer.Screen name="SignUp" component={SignUp} /> */}
            <Drawer.Screen
              name="Home"
              component={Home}
              //   options={{gestureEnabled: false}}
            />
            {/* <Drawer.Screen name="Appointment" component={Appointment} /> */}
          </Drawer.Navigator>
        </NavigationContainer>
         );
        }

这是截图 drawer

Answer 1

DrawerItemList 需要访问状态和导航对象。可以将包含所需信息的道具传递给 CustomDrawerContent 函数。

这是工作代码：

import 'react-native-gesture-handler';
import * as React from 'react';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

import SignUp from '../screens/SignUp';
import Appointment from '../screens/Appointment';

function CustomDrawerContent(props) {
  const {navigation} = props;
  return (
    <DrawerContentScrollView>
      <DrawerItemList {...props} />
      <DrawerItem label="Profile" onPress={() => navigation.closeDrawer()} />
      <DrawerItem
        label="Contact Us"
        onPress={() => navigation.toggleDrawer()}
      />
      <DrawerItem label="About" onPress={() => navigation.closeDrawer()} />
      <DrawerItem label="Logout" onPress={() => navigation.toggleDrawer()} />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

export default function AppDrawer() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerType="back"
        drawerStyle={{
          backgroundColor: '#fce1e6',
          width: 240,
        }}
        initialRouteName="SignUp"
        drawerContent={(props) => <CustomDrawerContent {...props} />}>
        <Drawer.Screen name="SignUp" component={SignUp} />
        <Drawer.Screen name="Appointment" component={Appointment} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}