React Native에서 Stack Navigator와 Bottom Tab Navigator 결합

Question

app.js의 Home Navigator에서 하단 탭 탐색기와 Stack Navigator를 결합하는 방법을 알고 싶습니다. 여기 내 코드가 있습니다.

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에서도 작동합니다.