如何根据当前BottomTab页面动态跳转对应React管理组件？

现有一个IconButton，点击后会导航至ManageExpense组件添加支出。新增AllIncome底部标签页后，当前共有三个底部标签：RecentExpenses、AllExpenses、AllIncome。需要修改该按钮的行为：

• 处于AllIncome页面时，点击跳转至ManageIncome组件
• 处于RecentExpenses或AllExpenses页面时，跳转至ManageExpense组件

尝试使用useRoute()仅返回ExpensesOverview，无法区分不同底部标签页，求解决方法。

代码示例：

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

方法1：利用screenOptions中的route参数 #

BottomTabs.Navigator的screenOptions回调里能拿到当前活跃标签页的route对象，通过route.name就能判断当前页面，直接修改跳转逻辑：

<BottomTabs.Navigator screenOptions={({ navigation, route }) => ({
  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={() => {
        const target = route.name === 'AllIncome' ? 'ManageIncome' : 'ManageExpense';
        navigation.navigate(target);
      }}>
    </IconButton>
  ),
})}>

方法2：使用useNavigationState获取深层路由 #

如果需要在组件内部获取完整导航状态，可以用useNavigationState钩子提取当前最内层的活跃路由名称：

import { useNavigationState } from '@react-navigation/native';

function ExpensesOverview() {
  const activeTab = useNavigationState(state => {
    let currentRoute = state.routes[state.index];
    // 遍历嵌套路由，找到最底层的活跃标签页
    while (currentRoute.state?.index !== undefined) {
      currentRoute = currentRoute.state.routes[currentRoute.state.index];
    }
    return currentRoute.name;
  });

  return (
    <BottomTabs.Navigator screenOptions={({ navigation }) => ({
      // ...原有样式配置
      headerRight: ({ tintColor }) => (
        <IconButton
          icon="add-circle-outline"
          size={26} color={tintColor}
          onPress={() => {
            const target = activeTab === 'AllIncome' ? 'ManageIncome' : 'ManageExpense';
            navigation.navigate(target);
          }}>
        </IconButton>
      ),
    })}>
      {/* ...标签页配置 */}
    </BottomTabs.Navigator>
  );
}

方法3：为每个标签页单独配置按钮 #

如果不同标签页的按钮需要差异化（比如图标、文字不同），可以给每个BottomTabs.Screen单独设置headerRight，逻辑更直观：

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

这三种方法都能解决问题，方法1最简洁，适合统一逻辑的场景；方法3更灵活，适合需要自定义不同标签页按钮的情况。

内容的提问来源于stack exchange，提问作者Chunderpeen