反应导航中的自定义抽屉导航器

Question

我有一个带有屏幕1.CreateList，2.SavedList的自定义抽屉导航器，在给定图像2中有可用的相同屏幕标题，假设如果我删除了Drawer.screen，则该屏幕将不被考虑用于导航。如何创建一个完全自定义的侧边栏？

//DrawerNav

 export const DrawerNav = ({ navigation }) => {
  return (
   <Drawer.Navigator
    drawerContent={(props) => <CustomDrawerContent {...props} />}>
    <Drawer.Screen name="Create List" component={MobileShoppingList} />
    <Drawer.Screen name="SavedList" component={SavedList} />
    <Drawer.Screen name="profileStack" component={profileStack} />
  </Drawer.Navigator>);};

//Custom Drawer 

<DrawerContentScrollView {...props}>
  <DrawerItemList {...props} />
  <View>
    <TouchableOpacity onPress={() => props.navigation.navigate("profileStack")}>
      <Text>
        Create List
      </Text>
      <Image
        resizeMode={"contain"}
        style={{ height: 16 }}
        source={require("./assets/Images/list.png")}
      />
    </TouchableOpacity>

    <TouchableOpacity onPress={() => props.navigation.navigate("SavedList")}>
      <Text style={{ fontSize: 16, fontFamily: "Raleway-Medium" }}>
        Saved List
      </Text>
      <Image
        resizeMode={"contain"}
        style={{ height: 16 }}
        source={require("./assets/Images/list.png")}
      />
    </TouchableOpacity>
  </View>
</DrawerContentScrollView>

Answer 1

从自定义抽屉中删除

//DrawerNav

 export const DrawerNav = ({ navigation }) => {
 return (
 <Drawer.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />}>
  <Drawer.Screen name="Create List" component={MobileShoppingList} />
  <Drawer.Screen name="SavedList" component={SavedList} />
  <Drawer.Screen name="profileStack" component={profileStack} />
</Drawer.Navigator>);};

//Custom Drawer 

<DrawerContentScrollView {...props}>
<View>
  <TouchableOpacity onPress={() => props.navigation.navigate("profileStack")}>
    <Text>
      Create List
    </Text>
    <Image
      resizeMode={"contain"}
      style={{ height: 16 }}
      source={require("./assets/Images/list.png")}
    />
  </TouchableOpacity>

  <TouchableOpacity onPress={() => props.navigation.navigate("SavedList")}>
    <Text style={{ fontSize: 16, fontFamily: "Raleway-Medium" }}>
      Saved List
    </Text>
    <Image
      resizeMode={"contain"}
      style={{ height: 16 }}
      source={require("./assets/Images/list.png")}
    />
  </TouchableOpacity>
</View>
</DrawerContentScrollView>