Как выдвинуть новую сцену, используя реагирующую навигацию?

Question

Я создаю приложение-родное приложение и использую его для навигации-навигации.

Я пытаюсь получить следующее поведение:

Есть главное меню Drawer, если я перемещаюсь к элементу из ящика, ящик должен закрыться, перейти к сцене и иметь одинаковую панель навигации для всех элементов в ящике.В одном элементе у меня есть навигатор по вкладкам.

В реальной реализации единственная проблема: ящик не закрывается при нажатии элемента.Любое предложение?

И если я перемещаюсь от сцены к другой сцене (эта сцена не является элементом ящика), я могу перейти к этой сцене, но мой заголовок (панель навигации) не меняется, и у меня неткнопка назад.Любое предложение?

Это то, что я сделал на данный момент, но не работает, как ожидалось.

    import React from 'react'
    import {
      createStackNavigator,
      createSwitchNavigator,
      createDrawerNavigator,
      createMaterialTopTabNavigator,
    } from 'react-navigation'
    import { StyleSheet } from 'react-native'
    import { Icon } from 'react-native-elements'
    import { AppConfig } from '../constants'
    import { AppSizes, AppColors } from '../theme'

    import DrawerMenu from './drawerMenu'
    // import DrawerScreen from './DrawerScreen'

    // Scenes
    import LaunchContainer from '../containers/Launch'
    import LoginContainer from '../containers/Login'
    import HomeContainer from '../containers/Home'
    import RoomsHistoryContainer from '../containers/RoomsHistory'
    import LogoutContainer from '../containers/Logout'
    import ChatContainer from '../containers/Chat'

    const styles = StyleSheet.create({
      iconStyle: {
        marginLeft: 10,
      },
    })

    const TabStack = createMaterialTopTabNavigator(
      {
        Conversation: {
          screen: RoomsHistoryContainer,
          navigationOptions: {
            title: 'Conversatii',
          },
        },
        Comunitate: {
          screen: LaunchContainer,
          navigationOptions: {
            title: 'Comunitate',
          },
        },
        Chatroom: {
          screen: LaunchContainer,
          navigationOptions: {
            title: 'Chatroom',
          },
        },
      },
      {
        tabBarOptions: {
          style: {
            backgroundColor: AppColors.tabbar.background,
          },
          activeTintColor: AppColors.tabbar.activeTintColor,
          inactiveTintColor: AppColors.tabbar.inactiveTintColor,
          indicatorStyle: {
            backgroundColor: AppColors.tabbar.indicatorColor,
          },
        },
      }
    )

    const AppStack = createStackNavigator(
      {
        Home: { screen: HomeContainer },
        Calendar: { screen: LaunchContainer },
        Comunitate: {
          screen: TabStack,
          navigationOptions: { title: 'Comunitate' },
        },
        Logout: { screen: LogoutContainer },
        ChatMessage: { screen: ChatContainer },
      },
      {
        headerMode: 'float',
        navigationOptions: ({ navigation }) => ({
          ...AppConfig.navbarProps,
          title: 'My app',
          headerLeft: (
             navigation.toggleDrawer()}
            />
          ),
        }),
      }
    )

    const DrawerStack = createDrawerNavigator(
      {
        Main: { screen: AppStack },
      },
      {
        contentComponent: DrawerMenu,
        contentOptions: {
          activeTintColor: 'white',
          activeBackgroundColor: 'white',
        },
        drawerWidth: AppSizes.screen.width > 250 ? AppSizes.screen.width - 80 : 250,
      }
    )

    const AuthStack = createStackNavigator(
      {
        SignIn: {
          screen: LoginContainer,
          navigationOptions: {
            title: 'Login',
          },
        },
        SignUp: {
          screen: LoginContainer,
          navigationOptions: {
            title: 'Logout',
          },
        },
      },
      {
        headerMode: 'none',
      }
    )

    const AppNavigator = createSwitchNavigator(
      {
        Launch: { screen: LaunchContainer },
        App: { screen: DrawerStack },
        Auth: { screen: AuthStack },
      },
      {
        initialRouteName: 'Launch',
      }
    )

    export default AppNavigator

Answer 1

1.Ящик навигации не закрывается

Это необычно, если в компоненте пользовательского ящика все правильно, оно должно работать.Но вы всегда можете использовать this.props.navigation.closeDrawer();

2.Кнопка «Назад» не отображается

Я предполагаю, что это происходит в AppStack.Ваш код выглядит хорошо.Обязательно используйте this.props.navigation.navigate(screenName).Если нажатие аппаратной кнопки возврата возвращает к предыдущему экрану, то навигация по стеку работает хорошо.Так что проблема в рендере вашего заголовка.Я бы порекомендовал удалить все пользовательские параметры на данный момент и попробуйте просто createStackNavigator без каких-либо параметров навигации.Это первый шаг, указывающий на причину вашей проблемы.

Answer 2

Закрытие ящика при использовании навигация

Просто вызовите метод закрытия ящика перед навигацией.

this.props.navigation.closeDrawer();
this.props.navigation.naviagte('ANOTHER_SCREEN');

Показать BackButton в заголовке в React Navigation

BackButton отображается только StackNavigation после push или navigate с другого экрана, который находится в том же StackNavigation.Таким образом,

• Проверьте положение вашего экрана.Это компонент экрана в StackNavigation?
• Он перемещен с другого экрана, который находится в том же StackNavigation?
• Правильно ли выбран режим заголовка в navigationOptions?