react-native之react-navigation5 tab嵌套多个stack导致tabbar显示的问题

完整实例代码

import React, { Component } from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
} from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from "../components/pages/home/HomePage";
import HomeDetailPage from "../components/pages/home/HomeDetailPage";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import MePage from "@components/pages/me/MePage";
import MessagePage from "@components/pages/me/MessagePage";
import LoginPage from '@components/pages/login/Login';
import RegisterPage from '@components/pages/login/Register';
import HomeThreePage from '@components/pages/home/HomeThreePage';
import Entrance from '@components/pages/Entrance';

const RootStack = createStackNavigator();
const MainStack = createStackNavigator()
const LoginStack = createStackNavigator()
const MeStack = createStackNavigator()
const Tab = createBottomTabNavigator();

const RouteListLogin = {
    login: LoginPage,
    regist: RegisterPage
}
const RouteListHome = {
    home: HomePage,
    homeDetail: HomeDetailPage,
    homeThree: HomeThreePage
}

const RouteListMe = {
    me: MePage,
    message: MessagePage
}

const routerLogin = () => {
    return 
        {Object.keys(RouteListLogin).map((item) => {
            return 
        })
        }
    

}


const routerHome = () => {
    return 

        {Object.keys(RouteListHome).map((item) => {
            return 
        })
        }
    

}

const routerMe = () => {
    return 
        {Object.keys(RouteListMe).map((item) => {
            return 
        })
        }
    

}

/**
 * 获取tabbar 可见度
 * @param {} route 
 */
const getTabBarVisibility = (route) => {

    if (route.state && route.state.index > 0){
        return false
    }
    return true;
}
 const tabBarVisibleOptionConfig = ({route})=>{
     return {tabBarVisible:getTabBarVisibility(route)}
 }


const TabScreen = () => {
    return (
        
            
            
        
    )
}
/**
 * 采用这种路由架构是因为 App通常登录之后跳转的动画一般都是modal 形式的、不是默认的card 
 * 参考 iOS原生的present 和pushviewcontroller两种方式 , 通常用户登录之后一般是presen形式
 */
const routerRoot = () => {

    return (
        

            

            

            


        
    )

}
export default routerRoot;

参考链接

你可能感兴趣的:(react-native之react-navigation5 tab嵌套多个stack导致tabbar显示的问题)