React Native实现登录后展示BottomNavigation，官方底部标签导航EXPO环境不渲染问题

1. 解决底部导航示例无法渲染问题 #

你已经排查到异常是display:none样式导致，按以下步骤修复：

• 排查全局样式覆盖：检查项目是否存在全局样式重置规则，比如给所有View组件默认设置了display:none，或是引入的第三方样式库误修改了导航组件的根样式，删除对应规则即可。
• 显式指定强制样式：给根容器、导航容器组件主动添加flex:1和display:flex覆盖异常样式，修改后的官方示例代码如下：

export default function App() {
  return (
    <View style={{flex: 1, display: 'flex'}}>
      <NavigationContainer style={{flex: 1, display: 'flex'}}>
        <MyTabs />
      </NavigationContainer>
    </View>
  );
}

• 校验依赖兼容性：确认@react-navigation/native、@react-navigation/bottom-tabs、react-native-screens、react-native-safe-area-context几个依赖版本匹配，版本不兼容也会触发异常样式，执行对应命令重装依赖即可，EXPO项目用npx expo install代替npm install。

2. 实现登录后才显示底部导航的逻辑 #

你之前的错误是把登录页放在了底部导航的子路由内，所以所有页面都会显示底部栏。正确的逻辑是用栈导航做根路由，根据登录态判断渲染内容：未登录时只渲染登录相关页面，不加载底部导航；登录后渲染带底部导航的业务页面组。
修改后的完整代码如下：

import React from 'react'
import { Provider, useSelector } from 'react-redux'
import { createStore } from 'redux'
import userReducer from './src/reducers/user'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'
import { View } from 'react-native'
import { theme } from './src/core/theme'
import {
  StartScreen,
  Dashboard,
  GroupScreen,
  InviteScreen,
  CreateGroup,
} from './src/screens'

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const store = createStore(userReducer)

// 已登录状态的底部导航组件
function LoggedInTabs() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen name="Music" component={MusicStack} />
      <Tab.Screen name="Albums" component={AlbumStack} />
    </Tab.Navigator>
  )
}

// 第一个底部标签的子页面栈
function MusicStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Dashboard" component={Dashboard} />
      <Stack.Screen name="GroupScreen" component={GroupScreen} />
    </Stack.Navigator>
  )
}

// 第二个底部标签的子页面栈
function AlbumStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="InviteScreen" component={InviteScreen} />
      <Stack.Screen name="CreateGroup" component={CreateGroup} />
    </Stack.Navigator>
  )
}

// 根路由判断逻辑
function RootNavigator() {
  // 从redux读取登录状态，你需要在userReducer中定义isLoggedIn字段，登录成功后dispatch action修改为true
  const isLoggedIn = useSelector(state => state.isLoggedIn)
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        {!isLoggedIn ? (
          // 未登录时仅渲染登录页，无底部导航
          <Stack.Screen name="StartScreen" component={StartScreen} />
        ) : (
          // 登录后渲染带底部导航的业务页面
          <Stack.Screen name="LoggedInTabs" component={LoggedInTabs} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default function App() {
  return (
    <Provider store={store} theme={theme}>
      {/* 强制根样式避免display:none异常 */}
      <View style={{flex: 1, display: 'flex'}}>
        <RootNavigator />
      </View>
    </Provider>
  )
}

如果你要继续使用react-native-paper的BottomNavigation.SceneMap方案，只需要把上述代码中的LoggedInTabs组件替换为你自己的BottomNavigation实现即可，外层登录态判断逻辑完全通用。

内容的提问来源于stack exchange，提问作者react1