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

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

Использование React Navigation 5 с expo.

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

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

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

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

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

Я также попытался сделать navigation.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>

Заранее благодарим за помощь.


react-native react-native-navigation react-native-drawer
person Paul    schedule 27.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

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

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

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

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

person MIPB    schedule 27.04.2020
comment
Я понимаю, что вы сказали, но можем ли мы это сделать? code ‹Papa Drawer› ‹Компонент экрана 1 = {StackSon1}› ‹Компонент экрана 2 = {StackSon1}› // обратите внимание на StackSon1 здесь ‹Papa Drawer› code - person Paul; 28.04.2020
comment
Вы имеете в виду добавить второй ящик к первому? Извини, я не понимаю, что ты имеешь в виду - person MIPB; 28.04.2020
comment
Нет, только один ящик, но все ссылки открывают экраны в StackSon1. В вашем примере у вас был экран 2, открытый StackSon2. Мне нужны экраны 2, 3, 4, все открытые экраны в StackSon1 - person Paul; 28.04.2020
comment
Я предполагаю, что это возможно и нет никаких ограничений, но я не вижу в этом никакого смысла. У вас будет одно и то же содержимое в двух разных ящиках. Это то, чего вы хотите достичь? - person MIPB; 28.04.2020
comment
Я думаю, вы имеете в виду, что у вас будет один и тот же контент в разных навигаторах стека. Я считаю, что у меня есть решение, которое я опубликую в ближайшее время. Не слишком уверен, что это лучшее решение, но оно работает так, как я хочу. - person Paul; 28.04.2020