从react-navigation动态删除drawerItem

Question

我正在使用react-navigation（2.18.2），并指定了一个contentComponent，以拥有一个自定义抽屉组件。

在这个自定义抽屉中，我需要删除一个drawerItem，如果它匹配某个条件（在我的例子中，我删除其中一个drawerItems）。正在正确地（可视地）移除了drawerItem，但是当我点击drawerItem时，它导航到我点击的索引+ 1，就好像菜单项没有被移除到其他地方一样。

const mainDrawerItems = {
  drawerItemA: {
    screen: ItemA,
    navigationOptions: {
      drawerLabel: 'Item A',
    },
  },
  drawerItemB: {
    screen: ItemB,
    navigationOptions: {
      drawerLabel: 'Item B',
    },
  },
  drawerItemC: {
    screen: ItemC,
    navigationOptions: {
      drawerLabel: 'Item C',
    },
  },
  drawerItemD: {
    screen: ItemD,
    navigationOptions: {
      drawerLabel: 'Item D',
    },
  },
}

const MainDrawer = createDrawerNavigator(mainDrawerItems, {
  drawerLockMode: 'locked-closed',
  initialRouteName: 'drawerItemA',
  contentComponent: Drawer,
})

然后抽屉组件看起来像这样。

import { DrawerItems } from 'react-navigation'

class Drawer extends React.Component<Props> {
  render(): React.Node {
    return (
      <ScrollView>
        <SafeArea forceInset={{ top: 'always', horizontal: 'never' }}>
          {this.drawerItems}
        </SafeArea>
      </ScrollView>
    )
  }

  get drawerItems () {
    const { items } = this.props
    const index = items.findIndex(
      item => item.key === 'drawerItemB'
    )
    if (-1 !== index) {
      items.splice(index, 1)
    }
    return <DrawerItems items={items} {...rest}>
  }
}

由于我现在已经删除了drawerItemB，只有三个显示（A，C和D）。但是 - 当我现在点击drawerItemC时，它会打开drawerItemD。我可以点击drawerItemA，它工作正常，但对于其余部分，它将始终打开菜单上的下一个屏幕，而不是我试图访问的屏幕。

任何关于如何使这项工作的想法将不胜感激。

Answer 1

我相信您可能想使用Array.filter来过滤您的items数组：

  get drawerItems () {
    const { items } = this.props
    const filteredItems = items.filter(
      item => item.key !== 'drawerItemB'
    )
    return <DrawerItems items={filteredItems} {...rest}>
  }