安装@react-navigation/material-bottom-tabs后出现DarkTheme未找到警告求助

算力阿峰

2026-7-14

解决react-native-paper中DarkTheme导出找不到的警告

你在使用material-bottom-tab导航器，执行安装命令npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons后，出现以下警告：

WARNING in ./node_modules/@react-navigation/material-bottom-tabs/lib/module/views/MaterialBottomTabView.js:109:51
export 'DarkTheme' (imported as 'DarkTheme') was not found in 'react-native-paper'

这是因为@react-navigation/material-bottom-tabs和你安装的react-native-paper版本不兼容——新版本的react-native-paper已经移除了DarkTheme这个直接导出（比如v5+改用MD3DarkTheme），但导航器包还在引用旧的导出路径。

给你几个解决办法：

降级react-native-paper到兼容版本
安装v4.x系列的react-native-paper，这个版本还保留DarkTheme导出，执行命令：
npm install react-native-paper@4.12.5

替换DarkTheme为新版本的导出
如果你不想降级，可在导航器配置里改用react-native-paper v5+提供的MD3DarkTheme：

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

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      theme={MD3DarkTheme}
      // 其他导航配置
    >
      {/* 你的页面路由 */}
    </Tab.Navigator>
  );
}

要是需要自定义主题，也可以基于MD3DarkTheme修改：

import { MD3DarkTheme } from 'react-native-paper';

const CustomDarkTheme = {
  ...MD3DarkTheme,
  colors: {
    ...MD3DarkTheme.colors,
    primary: '#your-color',
  },
};