Объедините Stack Navigator с Bottom Tab Navigator в React Native

Question

Я хочу знать, как объединить нижний навигатор вкладок с навигатором стека на главном навигаторе в app.js Вот мой код

import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Signup from './screens/signup';
import Login from './screens/login';
import Home from './screens/Home';
import Loading from './screens/Loading';
import Welcome from './screens/Welcome';
import ForgotPassword from './screens/ForgotPassword';

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const navigator = createStackNavigator({
  loading: {
    screen: Loading,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  Welcome: {
    screen: Welcome,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  signup: {
    screen: Signup,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  login: {
    screen: Login,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  Home: {
    screen: Home,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  InitialRouteName: Loading,
});

const AppContainer = createAppContainer(navigator);

Есть ли предложения добавить в этот код нижний навигатор вкладок? Я хочу знать, как объединить нижний навигатор вкладок с навигатором стека в app.js (вызов домой с нижним навигатором вкладок), спасибо

Answer 1

Вы можете создать tabNavigator и настроить его как любой другой маршрут.

Замечания: Также работает для drawerNavigator.

Пример:

const MainTab = TabNavigator(tabs, {
  initialRouteName: initialRouteName,
  tabBarPosition: "bottom",
});


const RootNavigator = StackNavigator(
  {
    Root: {
      screen: MainTab,
      navigationOptions: {
        headerMode: "none"
      }
    },
    /* Other Screens */
    Login: { screen: LoginScreen },
  }
)

const AppContainer = createAppContainer(RootNavigator);

Замечания: это также работает для drawerNavigator.