Combina Stack Navigator con Bottom Tab Navigator su React Native

Question

Voglio sapere come combinare il navigatore della scheda inferiore con Stack Navigator su Home Navigator in app.js Ecco il mio codice

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

Qualche suggerimento per aggiungere il navigatore della scheda inferiore in questo codice? Voglio sapere come combinare il navigatore della scheda inferiore con il navigatore dello stack in app.js (chiamando a casa con il navigatore della scheda inferiore) grazie

Answer 1

Puoi creare un tabNavigator e impostarlo come qualsiasi altro percorso.

Oss: Funziona anche per drawerNavigator.

Esempio:

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: funziona anche per drawerNavigator.