Expo Material Bottom Tabs Navigator异常：显示React-Native-Paper默认导航栏

我尝试创建常规的Material Bottom Tabs Navigator但无法正常工作。相同代码在其他项目可正常运行，但当前代码中，该导航器却显示React-Native-Paper的BottomNavigation。

@react-navigation/material-bottom-tabs本身就是基于react-native-paper实现的，默认会调用它的BottomNavigation组件。如果要显示常规Material Design风格的底部导航栏，需要改用@react-navigation/bottom-tabs并自定义样式匹配Material规范，具体步骤如下：

1. 安装依赖（未安装的话）：

npm install @react-navigation/bottom-tabs
# 或使用yarn
yarn add @react-navigation/bottom-tabs

2. 修改HomeScreen组件代码，替换导航器类型并调整样式配置：

import { View, Text } from 'react-native'
import React from 'react'
import { Feather } from '@expo/vector-icons'
// 替换为bottom-tabs导航器
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const Test = () => {
  return (
    <View style={{backgroundColor:"blue", flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text style={{color:'white'}}>Test</Text>
    </View>
  )
}

export default function HomeScreen() {
  return (
    <Tab.Navigator
      // 配置Material风格底部栏样式
      screenOptions={{
        tabBarStyle: {
          backgroundColor: 'black',
          height: 60,
          paddingVertical: 5
        },
        tabBarActiveTintColor: 'white',
        tabBarInactiveTintColor: '#888',
        headerShown: false
      }}
    >
      <Tab.Screen 
        name="Home" 
        component={Test} 
        options={{
          tabBarIcon: ({ color }) => (<Feather name="home" size={24} color={color} />)
        }}
      />
      <Tab.Screen 
        name="Search" 
        component={Test} 
        options={{
          tabBarIcon: ({ color }) => (<Feather name="search" size={24} color={color} />)
        }} 
      />
      <Tab.Screen 
        name="Post" 
        component={Test} 
        options={{
          tabBarIcon: ({ color }) => (<Feather name="plus-square" size={24} color={color} />)
        }} 
      />
      <Tab.Screen 
        name="Chat" 
        component={Test} 
        options={{
          tabBarIcon: ({ color }) => (<Feather name="message-square" size={24} color={color} />)
        }} 
      />
      <Tab.Screen 
        name="Me" 
        component={Test} 
        options={{
          tabBarIcon: ({ color }) => (<Feather name="user" size={24} color={color} />)
        }} 
      />
    </Tab.Navigator>
  )
}

如果一定要保留@react-navigation/material-bottom-tabs，可以通过覆盖react-native-paper的主题来修改样式：

1. 导入主题相关组件：

import { PaperProvider, DefaultTheme } from 'react-native-paper';

2. 自定义主题并包裹导航器：

const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'white',
    background: 'black',
  },
};

// 在HomeScreen的return中添加包裹
return (
  <PaperProvider theme={customTheme}>
    <Tab.Navigator barStyle={{ backgroundColor: 'black' }} activeColor="white" shifting={true}>
      {/* 原有屏幕配置 */}
    </Tab.Navigator>
  </PaperProvider>
)

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