Как создать несколько стекаNavigator?

Question

Здравствуйте, я пытаюсь создать:

• Верхняя панель для всего экрана
• нижняя панель только для 4 экранов

Итак, у меня есть 2 экрана -> Главный экран и экран подключения (без верхней или нижней панели)

Тогда у меня есть 6 экранов A B C D E F

Я хочу верхнюю полосу на каждой и нижнюю на A B C F

const TabRouter = createBottomTabNavigator(
{
  HomeAfterLoginScreen: { screen: A },
  ShowListAlertScreen: { screen: B },
  ShowListProfessionScreen: { screen: C },
  MyAccountScreen: { screen: F }
},
{
  tabBarPosition: "bottom",
  tabBarOptions: {
    style: { backgroundColor: "#50bcb8" },
    showIcon: true,
    showLabel: true,
    gesturesEnabled: true,
    indicatorStyle: { borderBottomWidth: 3, borderBottomColor: Style.color },
    inactiveTintColor: "#fff",
    activeTintColor: "#fff",
    tabStyle: { justifyContent: "center", alignItems: "center" }
  }
});

const Router = createStackNavigator({
  // If I add A B C F here i loose my bottombar
  D : {
    screen : D, 
    navigationOptions: {(nav option ..)}
  },
  E : {
    screen : E, 
    navigationOptions: {(nav option ..)}
  },
  Home: {
    screen: HomeScreen,
    navigationOptions: {(nav option ..)}
  },
  App: {
    screen: TabRouter,
    navigationOptions: {
      visible: false,
      header: null
    }
  },
  ConnexionScreen: {
    screen: ConnexionScreen,
    navigationOptions: {(nav option ..)}
  },
});

export default Router;

Вот пример моего роутера. Js

В этой конфигурации у меня есть нижняя панель, но у меня нет верхней панели. Любой совет?

это мой экран A, и я хочу верхнюю панель на нем. но если добавить этот экран в навигатор creatstack, я потеряю нижнюю панель.

Answer 1

попробуйте удалить заголовок: пустая строка в

App: {
screen: TabRouter,
navigationOptions: {
  visible: false,
  header: null
}

Answer 2

const STANDARD_NAVIGATION_OPTION = {
  backtitle: null,
  headerStyle: { backgroundColor: 'green' },
  headerTintColor: 'white'
};

const App = createBottomTabNavigator({
  tabA: {
    screen: createStackNavigator(
              {
                tabAFirstScreen: {
                  screen: tabAScreen,
                  navigationOptions: {
                    ...STANDARD_NAVIGATION_OPTION,
                    title: 'Header Title A'
                  }
                }
              },
              { headerMode: 'screen' })
  },
  tabB: {
    screen: createStackNavigator(
              {
                tabBFirstScreen: {
                  screen: tabBScreen,
                  navigationOptions: {
                    ...STANDARD_NAVIGATION_OPTION,
                    title: 'Header Title B'
                  }
                }
              },
              { headerMode: 'screen' })
  }
}, {
  tabBarPosition: 'bottom',
    tabBarOptions: {
    labelStyle: { fontSize: 12 },
      activeTintColor: 'yellow',
      pressColor: 'orange'
     }
})

const MainNavigator = createAppContainer(App);

export default MainNavigator;

Идея состоит в том, что сначала у вас есть bottomTabNavigator в качестве пользователя root, затем в нижней вкладке задайте каждую вкладку: tabA, tabB и т. Д.

Внутри каждой вкладки определите свой собственный createStackNavigator, чтобы каждая вкладка выглядела как header, что позволяет вам также размещать экран во вкладке.

Answer 3

Может помочь изображение того, что вы ожидаете.Это странный шаблон навигации для скрытия вкладок на некоторых экранах, это означает, что вы не хотите, чтобы пользователь переходил к скрытым вкладкам.Но если вы все еще используете те же экраны в верхнем tabnavigator, то совершенно бесполезно иметь нижнюю и верхнюю панели вкладок для тех же экранов.

У вас может быть вкладка только с 3 вкладками, одна из которыхэто вложенный tabnavigator с 4 вкладками, это шаблон.

Хорошо, вы не хотите заголовок?Я думал, что вам нужна навигация по верхним вкладкам, тогда довольно просто, вместо того, чтобы передавать экран HomeAfterLoginScreen, использовать вложенный stacknavigator, потому что tabnavigator не дает доступа к заголовкам, но если вы вложите туда stacknavigator, у вас может быть заголовок,тогда вы просто удалите заголовок с заголовком: null