react-native - react-navigation 中的自定义抽屉导航器

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>

标签： react-nativereact-navigation

Answer 1

从自定义抽屉中删除 <DrawerItemList {...props} />

//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>