Как открыть ящик по щелчку нижней вкладки в React Navigation?

Question

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

Пока у меня есть этот код ...

const MoreStack = createDrawerNavigator({
  More: { screen: More }
})

const MainTabNavigator = createBottomTabNavigator({
    Home: { screen: HomeStack }
    ...
    More: { screen: MoreStack }
})

const MainStackNavigator = createStackNavigator({
    MainTabNavigator: MainTabNavigator,
})

const AppSwitchNavigator = createSwitchNavigator({
  Welcome: { screen: WelcomeScreen },
  Home: { screen: MainStackNavigator }
})

const AppContainer = createAppContainer(AppSwitchNavigator)

UPDATE

Таким образом, возможное решение состоит в том, чтобы открыть MoreStack с начальным маршрутом, который визуализирует FlatList вместо ящика. В MoreStack я также создаю все страницы, которые мне нужно включить в More FlatList. Затем в окне «Дополнительно» я создаю массив с каждым маршрутом как объектом и связываюсь с ним из FlatList с помощью navigation.navigate (item.name)

Проблема с этим, и ключом к тому, чтобы заставить его работать как ящик, была установка backBehavior: 'history' в MainTabNavigator. Затем, когда вы добавляете обработчик жестов на экран «Больше» наSwipeRight и устанавливаете значение navigation.goBack (null), он возвращает вас к предыдущему маршруту, создавая ощущение, что вы «закрываете» дополнительный экран.

Я не уверен, как все это будет работать, как только я попаду в большее количество ситуаций с навигацией для маршрутов в пределах MoreStack, но я предполагаю, что справлюсь с этим, когда доберусь до него.

Answer 1

Навигатор ваших вкладок и StackNavigator должны быть дочерними для MainTabNavigator, как:

           const MainTabNavigator = createBottomTabNavigator({
                   Home: { screen: HomeStack }

                   More: { screen: MoreStack }
           })             

           const MainStackNavigator = createStackNavigator({
              MainTabNavigator: MainTabNavigator,
            })

           const MoreStack = createDrawerNavigator({
              SomePage:{screen:MainTabNavigator}//<<<<<<<<
               SomeOther:{screen:MainStackNavigator}//<<<<<<<<<<
               More: { screen: More }

               })

           const AppSwitchNavigator = createSwitchNavigator({
           Welcome: { screen: WelcomeScreen },
           Home: { screen: MaoreStack }//<<<<<<<<<<<<<<<<<<<<<<
             })

, а затем передать MoreStack AppSwitchNavigator .....