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

Question

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

我在下面留下了部分代码：

提供者：

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

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

底部选项卡导航器：

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
  );
}

我尝试了不同的替代方案，但没有一个能完全达到我想要的效果。

Answer 1

好吧，我让它为你工作，关键是：

customComponent: {
    position: 'absolute',
    left: 12, right: 12,
    borderRadius: 12,
    bottom: 49 + 8, //assume bottomnavigation height
    justifyContent: 'space-between',
    flexDirection: 'row',
    backgroundColor: colors.bottomTabBackground,
  },

在这里查看更多：

https://snack.expo.dev/@fukemy/spotify-clone