在@react-navigation/bottom-tabs 中禁用导航到堆栈顶部

Question

我的应用中有一个主底部选项卡导航器，其中包含三个屏幕，每个页面都包含一个堆栈导航器。问题是，每当我在聚焦时按下底部选项卡中的图标时，堆栈将返回到其相应堆栈导航器的第一页。我不希望这种情况发生在我的LoanNavigator 屏幕上。但它可以发生在其他屏幕上。我怎样才能做到这一点？我的代码如下所示：
MainBottomTabsNavigator.jsx

return (
        <TabBarContext.Provider value={{ props: tabBarProps, setProps: setTabBarProps }}>
            <Tab.Navigator initialRouteName='loan'>
                <Tab.Screen name="settings" component={SettingsStackNavigator}
                <Tab.Screen name="loan" component={LoanStackNavigator} />
                <Tab.Screen name="wallet" component={WalletStackNavigator}
            </Tab.Navigator>
        </TabBarContext.Provider>
    )

LoanNavigator.jsx

return (
        <Stack.Navigator>
            <Stack.Screen name="calculator" component={Loan.Calculator} />
            <Stack.Screen name="confirmation-modal" component={Loan.ConfirmationModal} options={{ 
                presentation: 'modal',
                detachPreviousScreen: false,
                cardStyle: { backgroundColor: 'transparent' }
             }} />
            <Stack.Screen name="choose-shop" component={Loan.ChooseShop} />
            <Stack.Screen name="deposit" component={Loan.Deposit} />
        </Stack.Navigator>
    )

Answer 1

您可以从documentation 找到如何拥有自己的自定义实现。

你可以这样做：

<Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>

简化的工作示例：https://snack.expo.dev/@tnr_c/custombottab