底部选项卡导航器上方的粘性组件

问：

我正在创建一个粘性组件，我想在我的选项卡栏导航器顶部显示它。组件的位置必须是相对的，否则它将覆盖我的应用程序的内容。我希望每个屏幕的提供程序都相同。

我将部分代码保留在下面：

供应商：

export const PlayerProvider = ({ children }) => {
  const { player, play, pause, playSong } = useSongPlayer();

  return (
    <PlayerContext.Provider value={{ player, play, pause, playSong }}>
      {children}
      <SongPlayer ... code />
    </PlayerContext.Provider>
  )
};

BottomTab导航器：

const Tab = createBottomTabNavigator();
export const BottomTabNavigation = () => (
  <Tab.Navigator initialRouteName='Home' screenOptions={{ tabBarActiveTintColor: 'white', tabBarStyle: styles.bottomContainer }}>
     <Tab.Screen ... tab1/>
    <Tab.Screen ... tab2/>
    <Tab.Screen ...tab3/>
  </Tab.Navigator>
);

应用程序：

export default function App() {
 ... some code ... 
  return (
    ... code
    <BottomTabNavigation />
    ... code
  );
}

我尝试了不同的替代方案，但没有一个能完全满足我的要求。