TabNavigator中嵌套StackNavigator

TabNavigator中嵌套StackNavigator

在TabNavigator中调用this.props.navigation.navigate('Login')就可以跳回到Login页面，此时就从TabNavigator回到StackNavigator导航啦。

import 'react-native-gesture-handler';

import React, { Component } from 'react';

import { NavigationContainer } from '@react-navigation/native';

//导入

import { createStackNavigator } from '@react-navigation/stack';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//引入页面模块

import LoginScreen from './app/views/LoginScreen';

import MainScreen from './app/views/MainScreen';

import SettingsScreen from './app/views/SettingsScreen';

//嵌套路由，需要嵌套的类型都要创建

const Stack = createStackNavigator();

const Tab = createBottomTabNavigator();

function Home() {

  return (

    //Tab页面home中有Main和Settings两个Stack导航页面

    //注意要引入MainScreen和SettingsScreen

    <Stack.Navigator>

      <Stack.Screen name="Main" component={MainScreen} />

      <Stack.Screen name="Settings" component={SettingsScreen} />

    </Stack.Navigator>

  );

}

function App() {

  return (

    <NavigationContainer>

      <Tab.Navigator>

        <Tab.Screen name="Home" component={Home} />

        <Tab.Screen name="Login" component={LoginScreen} />

      </Tab.Navigator>

    </NavigationContainer>

  );

}

export default App;

StackNavigator中嵌套TabNavigator

function Home() {

  return (

    //Stack页面home中有Main和Settings两个Tab导航页面

    <Tab.Navigator>

      <Tab.Screen name="Main" component={MainScreen} />

      <Tab.Screen name="Settings" component={SettingsScreen} />

    </Tab.Navigator>

  );

}

function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator>

        <Stack.Screen name="Login" component={LoginScreen} />

        <Stack.Screen name="Home" component={Home} />

      </Stack.Navigator>

    </NavigationContainer>

  );

}