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

Question

我有一个 IconButton，当前允许用户通过导航到“管理费用”组件来添加费用。我添加了一个显示收入的新底部选项卡。现在有 3 个底部选项卡（最近费用、所有费用、所有收入）。

我想更改添加费用 IconButton，以便如果用户位于 AllIncome BottomTab 屏幕上并按下按钮，他们将被定向到 ManageIncome 组件，如果他们位于“RecentExpenses”或“AllExpenses BottomTab”屏幕上，则会将他们导航到管理费用组件。

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，但我可能使用错误......谢谢。

Answer 1

更新标题的一种方法是在特定的

options

中使用

Screen

。如下所示

headerRight

已在

HomeScreen

中更新。

<Tab.Navigator
  screenOptions={({ navigation, route }) => ({
    headerRight: () => <Button title="Default" />,
  })}>
  <Tab.Screen
    name="Home"
    component={HomeScreen}
    options={({ navigation, route }) => ({
      headerRight: () => <Button title="Update" />,
    })}
  />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>