只需设置您想要的背景颜色：

<Tab.Navigator
initialRouteName="Home"
activeColor="#f0edf6"
inactiveColor="#3e2465"
barStyle={{ backgroundColor: '#694fad' }}
>
 {/* ... */}
</Tab.Navigator>

您必须对相同的设计做一些更改。启用shifting和labeled。在每个Tab.screen中添加tabBarColor。

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      activeColor="white"
      labelStyle={{ fontSize: 12 }}
      shifting={true}
      labeled={true}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarColor: 'red',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
           tabBarColor: 'blue',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: 'green',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
        
      />
    </Tab.Navigator>
  );
}

我只是改变了所有的版本，以前和它的工作现在很好：

react-native init datingapp --version 0.68.1

npm install @react-navigation/native@6.0.10
npm install react-native-screens@3.13.1
npm install react-native-safe-area-context@4.3.1
npm install react-native-paper@4.12.1
npm install react-native-vector-icons@9.1.0
npm install @react-navigation/material-bottom-tabs@6.2.1
npm install @react-native-async-storage/async-storage
npm install jotai
npm install @react-navigation/native-stack@6.6.2
npm install react-native-gesture-handler@2.6.1
npm install react-native-safe-area-context@4.3.1
npm install react-native-screens