react-native - 将自定义列表传递给 React Native 导航 5.5 DrawerItemList

Question

我需要使用 React Native 为应用程序制作多级抽屉菜单。我可以使用 CustomDrawerContent 自定义抽屉。在此我想显示路线的子集。目前我正在制作 props 的副本并更改其中的 state.routes 变量。有更好的方法吗？

const Drawer = createDrawerNavigator();
function CustomDrawerContent(props) {  
  const prop2 = props;
  prop2.state.routes = prop2.state.routes.slice(0, 3);

  return (
    <DrawerContentScrollView {...props} contentContainerStyle={{ flex: 1 }}>
        <View style={styles.drawerMenu}>
            <DrawerItemList {...prop2} />
        </View>
    </DrawerContentScrollView>
  );
}

export default function () {
  return (
    <Drawer.Navigator initialRouteName="Home_Home" hideStatusBar={true} statusBarAnimation="fade" 
        drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home_Home" component={HomeStack} />
      <Drawer.Screen name="Home_About" component={HomeStack} />
      <Drawer.Screen name="Home_FAQ" component={HomeStack} />
      <Drawer.Screen name="Profile_Calendar" component={HomeStack} />
      <Drawer.Screen name="Profile_Subscription" component={HomeStack} />
    </Drawer.Navigator>
  );
}

我尝试过将状态作为 Prop 传递，但似乎没有成功。

Answer 1

您可以将 DrawerItemList 替换为 react-navigation repository 中的实际代码。然后过滤掉你想要/不想要的路线，如下所示:

  const buildLink = useLinkBuilder()

  // Add your logic here
  const visibleRoutes = ['home', 'profile', 'resources', 'faq']
  
  const drawerList = props.state.routes.map((route: any, i: number) => {
    const focused = i === props.state.index
    const { title, drawerLabel, drawerIcon } = props.descriptors[route.key].options

    if (!visibleRoutes.includes(route.name)) {
      return <View key={route.key} />
    }

    return (
      <DrawerItem
        key={route.key}
        label={
          drawerLabel !== undefined
            ? drawerLabel
            : title !== undefined
            ? title
            : route.name
        }
        icon={drawerIcon}
        focused={focused}
        activeTintColor={props.activeTintColor}
        inactiveTintColor={props.inactiveTintColor}
        activeBackgroundColor={props.activeBackgroundColor}
        inactiveBackgroundColor={props.inactiveBackgroundColor}
        labelStyle={props.labelStyle}
        style={props.itemStyle}
        to={buildLink(route.name, route.params)}
        onPress={() => {
          props.navigation.dispatch({
            ...(focused
              ? DrawerActions.closeDrawer()
              : CommonActions.navigate(route.name)),
            target: props.state.key,
          })
        }}
      />
    )
  })