Kết hợp Stack Navigator với Bottom Tab Navigator trên React Native

Question

Tôi muốn biết cách kết hợp bộ điều hướng tab dưới cùng với Bộ điều hướng ngăn xếp trên Bộ điều hướng nhà trong app.js Đây là mã của tôi

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

Bất kỳ đề xuất nào để thêm trình điều hướng tab dưới cùng trong mã này? Tôi muốn biết cách kết hợp bộ điều hướng dưới cùng của tab với bộ điều hướng ngăn xếp trong app.js (gọi về nhà với bộ điều hướng tab dưới cùng), cảm ơn

Answer 1

Bạn có thể tạo tabNavigator và đặt nó giống như bất kỳ tuyến đường nào khác.

Obs: Cũng hoạt động cho ngăn kéoNavigator.

Thí dụ:

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: điều này cũng hoạt động cho ngăn kéoNavigator.