Блог

Главная - Вопросы по программированию - Как открыть ящик при нажатии на нижнюю вкладку в React Navigation?

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

#reactjs #react-native #react-navigation

#reactjs #react-native #react-навигация

Вопрос:

Я использую 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)

Обновить

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

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

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

Ответ №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 }//<<<<<<<<<<<<<<<<<<<<<<
             })

а затем предоставьте больше стека AppSwitchNavigator…..

Комментарии:

1. Я получаю «Компонент для маршрута SomePage должен быть компонентом react». Я думаю, потому что MainStackNavigator и MainTabNavigator находятся под MoreStack. Когда я помещаю их выше MoreStack, я получаю «не могу найти переменную MainTabNavigator»

2. хорошо, я отредактирую ответ, проверьте его, пожалуйста. просто измените порядок создания объекта, это исправит … я должен создать MainTabNavigator перед moreStack

3. Это тоже не работает. Затем я получаю сообщение «Компонент для маршрута More должен быть компонентом react»

4. Ps — Я также пытался выделить каждую функцию и импортировать их, и это по-прежнему создает ту же проблему.

Ответ №2:

Вы можете использовать этот код. Я использовал 3.x версию react-navigation

 const FooterTabs = (props) => (
 <Footer>
  <FooterTab}>
     <Button
       vertical
       onPress={() => props.navigation.openDrawer()}>
      <Text style={styles.Text}> Menu</Text>
     </Button>
   </FooterTab>
  </Footer>
 )
const MainTabNavigator = createBottomTabNavigator({
    Home: { screen: HomeStack }
    ...
    More: { screen: MoreStack }
},{
tabBarComponent: props =>
  <FooterTabs
    {...props} />,
initialRouteName: "Home",
})

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

const AppContainer = createAppContainer(MoreStack )