Динамически удалить элемент в поле «Реактив»

Question

Я использую реагирующую навигацию (2.18.2) и указал contentComponent, чтобы иметь настраиваемый компонент ящика.

В этом настраиваемом ящике мне нужно удалить один элемент-1, если он соответствуетопределенное условие (в моем примере я удаляю один из вихрей в любом случае).Крюк-элемент удаляется правильно (визуально), но когда я нажимаю на элемент-ящик, он перемещается к индексу, который я нажал + 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,
})

Тогда компонент 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}>
  }
}

Так как я теперь удалил в себе в поле врезкиItemB, отображаются только три (A, C и D).Однако, когда я теперь нажимаю наолоток элемента I, он открывает ящик.Я могу нажать на BoxItemA, который работает нормально, но в остальном он всегда откроет следующий в меню экран вместо того, к которому я пытаюсь получить доступ.

Любые идеи о том, какполучить эту работу будет высоко ценится.

Answer 1

Полагаю, вы можете использовать Array.filter для фильтрации массива элементов:

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