Material Bottom Tab Navigator实现效果与官方文档不符问题咨询

数据老陈

2026-8-6

问题原因与修复方案

你的问题核心是react-native-paper版本和@react-navigation/material-bottom-tabs不兼容，再加上导航库的默认行为导致的：

当项目里安装了react-native-paper时，@react-navigation/material-bottom-tabs会自动切换为使用react-native-paper的BottomNavigation组件，而非自身的原生实现。你当前使用的react-native-paper是v5.x版本，该版本的BottomNavigation与导航库v6.x预期适配的v4.x版本差异极大，直接引发样式不符、点击高亮失效的问题。

两种修复方式

方式一：降级react-native-paper到兼容版本

将react-native-paper降至v4.x系列（推荐4.12.5，兼容性最优）：

卸载当前版本：

npm uninstall react-native-paper
# 使用yarn则执行：yarn remove react-native-paper

安装兼容版本：

npm install react-native-paper@4.12.5
# 使用yarn则执行：yarn add react-native-paper@4.12.5

重装依赖并重启项目：

npm install
# 使用yarn则执行：yarn install

重启后导航器会恢复使用自身的原生实现，样式和点击高亮功能即可正常工作。

方式二：强制使用导航器原生实现（无需降级）

若不想改动react-native-paper版本，可在创建导航器时添加配置，强制使用导航器的原生实现：

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

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      useLegacyImplementation // 关键配置：强制启用原生实现
      screenOptions={{
        // 你的原有配置（如图标、颜色等）
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

该配置会让导航器忽略项目中的react-native-paper组件，直接使用自身的Material Bottom Tab实现，效果将与React Navigation官方文档一致。