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

   

     

     

   

  );

}

function App() {

  return (

   

     

       

       

     

   

  );

}

export default App;

StackNavigator中嵌套TabNavigator

function Home() {

  return (

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

   

     

     

   

  );

}

function App() {

  return (

   

     

       

       

     

   

  );

}