在网络构建上反应导航底部选项卡屏幕堆栈

Question

我正在 expo typescript 应用程序中使用 React 导航，并且正在为 iO、Android 和 Web 构建进行构建。我已经在主屏幕上设置了底部选项卡。我已经一切正常，它的外观和行为都适用于 iO 和 Android，但对于网络应用程序来说，它看起来还不错，直到我导航到不同的选项卡。它们不是用各自的屏幕取代前一个屏幕，而是堆叠起来。这是我的底部选项卡代码：

const Tab = createBottomTabNavigator();

export const MainView = () => {
    const {queueList,roomList, agentProfile} = useDataContext();
    return (<>
        <Tab.Navigator screenOptions={{
            headerStyle: {
                backgroundColor: slcolor.lightblue,
            },
            headerTitleStyle: {color: "white"},
            headerLeft: () => <Text style={{color: "white", paddingLeft: 20, fontSize: 20, paddingBottom: 3}}>{agentProfile.agent.username}</Text>,
            headerRight: () => <CurrentAgentStatus/>,
        }}
                       detachInactiveScreens={false}
                       initialRouteName="Profile"
        >
            <Tab.Screen name="Chat Sessions" component={ChatSessions} options={{tabBarLabelStyle: {fontSize: 14}, tabBarIcon: ({color, size}) => <MaterialCommunityIcons name="forum" color={color} size={size}/>, tabBarBadge: Object.entries(roomList).length>0?Object.entries(roomList).length:undefined}}/>
            <Tab.Screen name="Queue" component={QueueView} options={{tabBarLabelStyle: {fontSize: 14}, tabBarIcon: ({color, size}) => <MaterialCommunityIcons name="human-queue" color={color} size={size}/>, tabBarBadge: Object.entries(queueList).length>0?Object.entries(queueList).length:undefined}}/>
            <Tab.Screen name="Agents" component={AgentsView} options={{tabBarLabelStyle: {fontSize: 14}, tabBarIcon: ({color, size}) => <MaterialCommunityIcons name="face-agent" color={color} size={size}/>}}/>
            <Tab.Screen name="Profile" component={ProfileView} options={{tabBarLabelStyle: {fontSize: 14}, tabBarIcon: ({color, size}) => <MaterialCommunityIcons name="account" color={color} size={size}/>}}/>
        </Tab.Navigator>
    </>);
}

export type TabParamList = {
    "Chat Sessions": undefined;
    Queue: {startChat: (sessionId:SessionId)=>void};
    Agents: undefined;
    Profile: undefined;
};

这里是 iOs 模拟器的屏幕截图及其外观：

这是网络版本的样子：

您可以在此处看到选项卡屏幕如何堆叠。我似乎可以弄清楚为什么会发生这种情况。

}丹

Answer 1

根据React Navigation docs，选项卡的标签是由道具

tabBarLabelPosition

控制的。默认情况下，位置是根据设备宽度自动选择的。

通过设置此属性可以在所有设备上同步风格。

<Tab.Navigator 
  screenOptions={{
    ...
    //Add this line
    tabBarLabelPosition: "below-icon"
  }}
>
  ...
</Tab.Navigator>