如何使用新的 React Native expo-router 抽屉制作自定义抽屉？

Question

我正在使用 expo-router 的抽屉。我希望抽屉包含用户个人资料图片和名称以及导航抽屉项目，但它显示错误：

couldn't find parent navigation with route 'screen1'

。

我应该如何编写 CustomDrawerContent 组件的代码？

请检查下面我的代码：

function CustomDrawerContent({ drawerPosition, props, navigation }) {
  
  const insets = useSafeAreaInsets();
  const router = useRouter();

  return (
    <ScrollView style={{ flex: 1 }} >
      <View
        style={{
          height: 200,
          width: "100%",
          justifyContent: "center",
          alignItems: "center",
          borderBottomColor: "#f4f4f4",
          borderBottomWidth: 1,
        }}
      >
        <Image
          source={require("../../assets/icon.png")}
          style={{
            height: 90,
            width: 90,
            borderRadius: 65,
          }}
        />
        <Text>
          Jacob
        </Text>
        <Text>
          Product Manager
        </Text>
      </View>

      <Drawer.Screen name="screen1" />
      <Drawer.Screen name="screen2" />

      
    </ScrollView>

  );
}

export default function Layout() {
  return (
    <Drawer
      drawerContent={(props) => {
            
        return <CustomDrawerContent drawerPosition={undefined} {...props} />
      }}
      screenOptions={{ headerShown: false }}
      
    >
    </Drawer>
  );

Answer 1

看来您想使用自定义抽屉内容，然后： 您需要将

<Drawer.Screen>

标签移动到布局函数的子级。

export default function Layout() {
  return (
    <Drawer
      drawerContent={(props) => {
            
        return <CustomDrawerContent drawerPosition={undefined} {...props} />
      }}
      screenOptions={{ headerShown: false }}
      
    >
      <Drawer.Screen name="screen1" />
      <Drawer.Screen name="screen2" />
    </Drawer>
  );

另外，要为抽屉提供样式，请使用 screenOptions.drawerStyle 属性，例如：

<Drawer
     screenOptions={{
        drawerType: "front",
        drawerStyle: {
          backgroundColor: "pink",
          width: "100%",
        },
      }}
...
>
...
</Drawer>