Javascript 如何根据当前打开的BottomTab Screeb动态加载React组件

我有一个IconButton，目前允许用户通过导航到"Manage—box"组件来增加开销.我添加了一个新的BottomTab，显示收入.现在有3个BottomTab(最近费用，所有费用，所有收入).

我想更改添加费用IconButton，以便如果用户在AllIncome BottomTab屏幕上并按下该按钮，则将其定向到ManageIncome组件，如果用户在最近费用或AllExpenses BottomTab屏幕上，则将其导航到ManageIncome组件.

import ManageExpense from './screens/ManageExpense';
import RecentExpenses from './screens/RecentExpenses';
import AllExpenses from './screens/AllExpenses';
import { GlobalStyles } from './constants/styles';
import IconButton from './components/UIElements/IconButton';
import ExpensesContextProvider from './context/expensesContext';
import AllIncome from './screens/AllIncome';
import { IncomeContextProvider } from './context/incomeContext';
import ManageIncome from './screens/ManageIncome';

const Stack = createNativeStackNavigator();
const BottomTabs = createBottomTabNavigator();

function ExpensesOverview() {

  
  return (
    <BottomTabs.Navigator screenOptions={({ navigation }) => ({

      headerStyle: { backgroundColor: GlobalStyles.colors.primary500 },
      headerTintColor: 'white',
      tabBarStyle: { backgroundColor: GlobalStyles.colors.primary500 },
      tabBarActiveTintColor: GlobalStyles.colors.accent500,
      headerRight: ({ tintColor }) => (
        <IconButton
          icon="add-circle-outline"
          size={26} color={tintColor}
          onPress={() => {
            navigation.navigate('ManageExpense');
          }}>
        </IconButton>
      ),
    })}
    >
      <BottomTabs.Screen
        name="RecentExpenses"
        component={RecentExpenses}
        options={{
          title: 'Recent Expenses',
          tabBarLabel: 'Recent Expenses',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="time-outline" size={size} color={color} />
          ),
        }}
      />
      <BottomTabs.Screen
        name="AllExpenses"
        component={AllExpenses}
        options={{
          title: 'All Expenses',
          tabBarLabel: 'All Expenses',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="globe-outline" size={size} color={color} />
          ),
        }}
      />
      <BottomTabs.Screen
        name="AllIncome"
        component={AllIncome}
        options={{
          title: 'All Income',
          tabBarLabel: 'View Income',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="cash-outline" size={size} color={color}></Ionicons>
          ),
        }}
      />
    </BottomTabs.Navigator>
  );
}

export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      <ExpensesContextProvider>
        <IncomeContextProvider>
          <NavigationContainer>
            <Stack.Navigator screenOptions={{
              headerStyle: { backgroundColor: GlobalStyles.colors.primary500 },
              headerTintColor: 'white',
              headerBackTitle: 'Back',
            }}>
              <Stack.Screen
                name="ExpensesOverview"
                component={ExpensesOverview}
                options={{ headerShown: false }}
              />
              <Stack.Screen
                name="ManageExpense"
                component={ManageExpense}
                options={{
                  presentation: 'modal',
                }} />
                 <Stack.Screen
                name="ManageIncome"
                component={ManageIncome}
                options={{
                  presentation: 'modal',
                }} />
            </Stack.Navigator>
          </NavigationContainer>
        </IncomeContextProvider>
      </ExpensesContextProvider>
    </>
  );
};

我试过使用useRoute()函数，但它似乎只返回'ExpensesOverview'值，所以它不能区分不同的BottomTabs，但我可能用错了.谢谢.