您只需要计算底部导航栏的高度，并创建一个位置为“绝对”的视图，并将其保持在底部导航栏上方，将导航栏的高度指定为该视图的“底部”。

<View>
  <View
    style={{
      position: "absolute",
      backgroundColor: "#4470AE",
      bottom: 75,
      flexDirection: "row",
      width: "90%",
      height: 60,
      paddingVertical: "3%",
      alignSelf: "center",
      borderRadius: 12,
      margin: "3%",
    }}
  ></View>
  <View
    style={{
      position: "absolute",
      backgroundColor: "orange",
      bottom: 0,
      height: 75,
      flexDirection: "row",
      width: "100%",
      justifyContent: "space-around",
      paddingVertical: "3%",
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20,
    }}
  >
  </View>
</View>

我建议使用一个React.Context，因为你想在每个屏幕上显示相同的对象（音乐控制面板），具有相同的状态，而不是在每个屏幕上的副本。
对于定位，我建议使用absolute位置。这与“react-navigation”一起工作，因为标题和底部区域被改变了。这意味着bottom:0不再是标签导航器中的屏幕底部，而是标签栏的正上方。
下面是一个example：

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MusicControlPanelContext, MusicControlPanelConsumer } from './components/MusicControlContext';
import {MusicControlPanel} from './components/MusicContorlPanel'

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
      <MusicControlPanelConsumer/>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
      <MusicControlPanelConsumer/>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <MusicControlPanelContext.Provider value={MusicControlPanel}>
      <>
        <NavigationContainer>
          <Tab.Navigator
            tabBarOptions={{
              activeTintColor: '#000000',
              inactiveTintColor: 'gray',
              activeBackgroundColor: '#ff0000',
              inactiveBackgroundColor: '#ff0000',
              style: {
                backgroundColor: '#ffffff',
              },
            }}>
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Settings" component={SettingsScreen} />
          </Tab.Navigator>
        </NavigationContainer>
      </>
    </MusicControlPanelContext.Provider>
  );
}

import * as React from 'react';
import { MusicControlPanelContext } from './MusicControlPanelContext';
import { View } from 'react-native';

function MusicControlPanelConsumer() {
  return (
   
    <MusicControlPanelContext.Consumer>
      {(Component) => <Component/>}
    </MusicControlPanelContext.Consumer>
    
  );
}

export { MusicControlPanelConsumer };

import * as React from 'react';
import {MusicControlPanel} from '../MusicContorlPanel'

export const MusicControlPanelContext = React.createContext<React.FC>(MusicControlPanel);

import * as React from 'react';
import { View, Text, Pressable } from 'react-native';

export const MusicControlPanel: React.FC = () => {
  const [startStop, setStartStop] = React.useState(false);
  return (
    <View
      style={{
        position: 'absolute',
        width: '90%',
        height: 100,
        backgroundColor: '#ff00ff',
        bottom: 10,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
      <Pressable
        onPress={() =>
          setStartStop((val) => {
            return !val;
          })
        }>
        <Text>{startStop ? 'Start' : 'Stop'}</Text>
      </Pressable>
    </View>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>