Как реализовать Drawer и TabBar в StackNavigator

Question

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

Проблемы:

1. Я использую компонент заголовка из библиотеки native-base, но не могу открыть ящик.
2. Как использовать мой собственный компонент для ящика и вкладки?
3. Может быть, мне нужно изменить структуру.Я рассмотрю любые рекомендации по улучшению структуры.

Я использовал версию 3 response-navigation.

Мой код:

const AppStackNavigator = createStackNavigator({
    loginFlow: { 
      screen: createStackNavigator({
        intro: { screen: Intro },
        login: { screen: Login },
        registration: { screen: Registration },
      }),
      navigationOptions: {
        header: null
        }
    },
    mainFlow: {
      screen: createStackNavigator({
        MyDrawer: createDrawerNavigator({
            Dashboard: {
                screen: Home,
              },
              first: {
                screen: first,
              },
              second: {
                screen: second
              },
              third: {
                screen: third
              },
              last: {
                screen: last
              }
        }),

        // settings: { screen: SettingsScreen },
          someTab: { 
            screen: createBottomTabNavigator({
              main: { screen: Home },
              firsrTab: { screen: Screen1 },
              secondTab: { screen: Screen2 },
              thirdTab: { screen: Screen3 },
              nextTab: { screen: Screen4 }
            }),
            navigationOptions: {
              header: null
            },
          }
  }),
    navigationOptions: {
      header: null
    }
  }
});

const AppContainer = createAppContainer(AppStackNavigator);

import React from 'react';
import { Header, Left, Icon, Right } from 'native-base';

const CustomHeader = (props) => {
    return(
        <Header>
            <Left>
                <Icon
                    name='menu'
                    onPress={() => {this.props.navigation.openDrawer()}}
                />
            </Left>
        </Header>
    )
}

export { CustomHeader }

Answer 1

Возможно, вы захотите рассмотреть SwitchNavigator для потока аутентификации вместо Stack at the top, так как он заменяет маршруты, так что вы никогда не сможете вернуться к входу в систему / регистрации / всплеску после входа в приложение и для доступа к вкладкам.и Drawer внутри стека / переключателя, вы можете обернуть Drawer внутри навигатора верхнего уровня и вкладку внутри ящика.

Таким образом, ваша корневая навигация будет выглядеть следующим образом.

export default RootNavigation = createSwitchNavigator({
  LoginScreen: {screen: LoginContainer},
  Application: {screen: AppDrawer},
});

Навигатор вашего ящикадолжно выглядеть следующим образом:

const AppDrawer = createDrawerNavigator({
  ApplicationTab: {screen: TabBar},
  ... other screen that you might want to use in drawer navigation.
}, {
   contentComponent : (props) => <MyCustomDrawer {...props} />
});

и Tab Navigator будет иметь вид

const TabBar = createBottomTabNavigator({
  TabScreen1: {screen: Tab1},
  ... other tabs...
}, {
  tabBarComponent : (props) => <MyTabBar {...props} />
});

Если вы поместите каждый из этих навигаторов в один файл, пожалуйста, объявите Tab передЯщик и ящик перед коммутатором, иначе это может привести к ошибкам.

По моему опыту, настройка навигатора ящиков очень проста и полезна, но настройка вкладки - нет, для того же документа нет соответствующего документа API.и ответы сообщества также несколько вводят в заблуждение.НО, с обычными вариантами использования и для большинства ярких тоже, вы можете выполнять свою работу без необходимости переопределять заданный по умолчанию, так как он уже очень работоспособен и настраивается с точки зрения значков, материализма, и каждая вкладка выставляет свою на onPressэто также может быть легко переопределено.

и так как вы, как выдвижной ящик, не работаете с / через жатку, то можете ли вы убедиться, что navigation опора, которую вы используете для управления выдвижным ящиком open close или toggleдействие дается выдвижным ящиком?