ReactNativeでStackNavigatorとBottomTabNavigatorを組み合わせる

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を作成して、他のルートと同じように設定できます。

Obs：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);

Obs：これはdrawerNavigatorでも機能します。