DrawerItemList 如何获取索引项

在使用 react-native-paper 的 DrawerItemList 组件时，我们经常需要获取当前选择的索引项。而这一过程并不复杂，只需使用 DrawerItem 的 onPress 属性在点击抽屉菜单项时触发回调函数，从而获取选中项的索引。

下面是具体的实现过程：

1. 在 react-navigation 的 createDrawerNavigator 方法中，我们可以使用 drawerContent 属性自定义抽屉菜单的内容。在自定义抽屉菜单时，需要引入 DrawerItemList 和 DrawerItem 组件。

2. 使用 DrawerItemList 组件来渲染抽屉菜单的列表项，将 DrawerItem 组件作为其子组件。

import { DrawerItemList, DrawerItem } from '@react-navigation/drawer';

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Settings"
        onPress={() => props.navigation.navigate('Settings')}
      />
    </DrawerContentScrollView>
  );
}

3. 在 DrawerItem 组件的 onPress 属性中，传入一个回调函数来获取当前选中项的索引。

<DrawerItem
  label="Home"
  onPress={() => {
    props.navigation.navigate('Home');
    // 获取选中项的索引
    const index = props.state.index;
    console.log('Index:', index);
  }}
/>

通过这种方式，我们就可以轻松地获取到当前选中项的索引，并在回调函数中进行一些相应的操作。这对于实现一些特定的功能非常有用。

以上就是使用 DrawerItemList 如何获取索引项的介绍，希望能对您有所帮助！