React native: как сделать так, чтобы ссылки на несколько ящиков указывали на экраны в одном и том же стековом навигаторе - PullRequest
Новая
       63

React native: как сделать так, чтобы ссылки на несколько ящиков указывали на экраны в одном и том же стековом навигаторе

0 голосов
/ 27 апреля 2020

Я новичок в реакции на нативный и не видел ни одного вопроса, заданного кем-либо, или не нашел способа обойти это.

Использование реакции навигации 5 с выставкой.

В настоящее время У меня есть следующая структура приложения: Навигатор стека внутри навигатора ящиков. 

Example of page structure:
Drawer Navigator ( links ):
Home (RouteStack)
Screen 1 
Screen 2
Screen 3

RouteStack( screens) :
Home ( initial route )
Screen 1
Screen 2
Screen 4

Как получить ссылку Экран 1 / Экран 2 в навигаторе ящиков Загрузить RouteStack: Экран 1 / Экран 2? Эти ссылки предоставлены для быстрого перехода к нужному экрану.

Нужны некоторые рекомендации о том, как этого добиться.

Я думал о возможности выдвижного ящика внутри стека, но внутри есть экраны ящика, который не может быть указан в стеке. Следовательно, пошел со стеком в ящике.

Я также попытался сделать навигацию.navigate (route.name) внутри RouteStack

Пример кода: Навигатор ящика: 

<NavigationContainer>
      <Drawer.Navigator drawerContent={(props, navigation) => <CustomDrawerContent {...props} {...navigation} />}>
        <Drawer.Screen name="Home" component={RouteStack} />
        <Drawer.Screen name="MyItems" component={RouteStack} />
        <Drawer.Screen name="ContactRep" component={RouteStack} />
        <Drawer.Screen name="Settings" component={SettingInfo} />
      </Drawer.Navigator>
    </NavigationContainer>

Навигатор стека (RouteStack) выглядит следующим образом: 

   <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{ gestureEnabled: false, headerTitleAlign: 'auto' }}
    // headerMode="float"
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: '',
          headerStyle: {
            backgroundColor: '#fff',
          },
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'bold'
          },
          headerLeft: props => <HeaderLeftMenu {...props} />,
          headerRight: props => <HeaderRightMenu {...props} />,
          headerTitle: props => <HeaderTitle {...props} />
        }}
      />
      <Stack.Screen
        name="ContactRep"
        component={ContactRep}
        options={{ headerTitle: props => <HeaderTitle {...props} /> }}
      />
      <Stack.Screen
        name="MyItems"
        component={MyItems}
        options={{ headerTitle: (props, navigation) => <HeaderTitle {...props} /> }}
           />

    </Stack.Navigator>

Заранее спасибо и помощь приветствуется.

1 Ответ

0 голосов
/ 28 апреля 2020

Ваш метод в порядке. Но чтобы прояснить ваши идеи, я приведу вам пример.

Предположим, у меня есть основной ящик. В этом ящике я могу перейти на 2 разных экрана. Внутри этих экранов я могу ориентироваться и делать разные вещи (например, переходить на подэкраны), но никогда не go вне ящика.

Чтобы сделать это, нам нужно было бы создать вложенных навигаторов . Это означает, что один тип навигатора будет находиться внутри другого. В нашем примере: 

<Papa Drawer>
 <Screen 1 component={StackSon1}>
 <Screen 2 component={StackSon2}>
<Papa Drawer>

И тогда StackSon1, например, будет выглядеть так: 

StackSon = () => {
return (
<Stack.Navigator>
 <Stack.Screen>
 <Stack.Screen>
 ...
  )
}

React Navigation также будет обрабатывать каждый ящик отдельно, что означает, что вы не не нужно беспокоиться о том, что пользователь создает бесконечную цепочку открытых экранов.

Кроме того, помните, что когда мы вкладываем в навигаторы функцию (как я), мы должны использовать return (или упрощенная версия возврата только с круглыми скобками)

Надеюсь, это поможет.

...