Uber-подобная навигация по ящикам в приложении React Native

Question

Я пытаюсь выяснить, как реализовать навигацию в приложении React Native с использованием response-navigation, чтобы сделать его похожим на приложение Uber.

Я бы хотел использовать Drawer, который содержит такие пункты меню, как «Настройки», «Профиль» и т. Д. При щелчке по каждому элементу следует открыть модал с навигацией «Стек» со стрелкой влево или крестиком в верхней части (заголовок), чтобы закрыть стек и вернуться назад. на главный экран. Когда модал с навигационным стеком открыт, я бы хотел отключить ящик.

Этого можно достичь с помощью реагирующей навигации?

Answer 1

Да, реагирующая навигационная панель принимает произвольные компоненты реакции в качестве содержимого. Вы можете увидеть пример, набрав на своем телефоне https://expo.io/@react-navigation/NavigationPlayground.

Пример кода из https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/src/Drawer.tsx

const InboxStack = createStackNavigator(
  {
    Email: { screen: EmailScreen },
    Inbox: { screen: InboxScreen },
  },
  {
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <MaterialIcons
          name="move-to-inbox"
          size={24}
          style={{ color: tintColor } as StyleProp<TextStyle>}
        />
      ),
      drawerLabel: 'Inbox',
    },
  }
);

const DraftsStack = createStackNavigator(
  {
    Drafts: { screen: DraftsScreen },
    Email: { screen: EmailScreen },
  },
  {
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <MaterialIcons
          name="drafts"
          size={24}
          style={{ color: tintColor } as StyleProp<TextStyle>}
        />
      ),
      drawerLabel: 'Drafts',
    },
  }
);

const DrawerExample = createDrawerNavigator(
  {
    Drafts: {
      path: '/sent',
      screen: DraftsStack,
    },
    Inbox: {
      path: '/',
      screen: InboxStack,
    },
  },

  {
    contentOptions: {
      activeTintColor: '#e91e63',
    },
    initialRouteName: 'Drafts',
  }
);