覆盖 Header Title React Navigation V5

Question

我在堆栈导航器中创建了一个嵌套的选项卡导航器，如下所示：

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator();

function TabNav () {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen}></Tab.Screen>
      <Tab.Screen name="Category" component={CategoryScreen}></Tab.Screen>
      <Tab.Screen name="Settings" component={SettingsScreen}></Tab.Screen>
    </Tab.Navigator>
  )
} 

export default function App() {
  return (
    <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Tab" component={TabNav}></Stack.Screen>
          <Stack.Screen name="Category" component={CategoryScreen}>
          </Stack.Screen>
          <Stack.Screen
            name="SpecialBeerScreen" component= {SpecialBeerScreen}>
          </Stack.Screen>
        </Stack.Navigator>
    </NavigationContainer>
  )
}

但是，对于每个屏幕，header 现在看起来像 Tab。 如何使用自定义文本（例如主页、类别等）为每个屏幕覆盖此 Header。

Answer 1

更新：这在react-navigation v6中仍然有效

---

使用 react-navigation 文档中基于子导航器的 state 设置父屏幕选项中概述的getFocusedRouteNameFromRoute来访问嵌套导航器中的屏幕信息。

改变这一行

<Stack.Screen name="Tab" component={TabNav}></Stack.Screen>

到以下（添加options道具）：

<Stack.Screen
  name="Tab"
  component={TabNav}
  options={({ route }) => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';

    switch (routeName) {
      case 'Category': {
        return {
          headerTitle: 'Category',
        };
      }
      case 'Settings': {
        return {
          headerTitle: 'Settings',
        };
      }
      case 'Home':
      default: {
        return {
          headerTitle: 'Home',
        };
      }
    }
  }}
/>

您还必须导入getFocusedRouteNameFromRoute ，因此还要添加：

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

Answer 2

如果我正确理解您的问题，您希望在更改选项卡时更改堆栈标题。 在这种情况下，您可以使用 React Context 来控制它。

（我也把这段代码放在 snack https://snack.expo.io/@gie3d/change-header-from-tab ）

编辑：1，我把它分成 3 个文件，并假设它们都在同一个目录中。

HomeTitleContext.js

export const HomeTitleContext = React.createContext({
    title: 'default title',
    setTitle: () => {},
});

应用程序.js

import { HomeTitleContext } from './HomeTitleContext';

export default function App() {
    const [title, setTitle] = useState('default title');
    return (
        <HomeTitleContext.Provider
            value={{
                title,
                setTitle,
            }}
        >
            <HomeTitleContext.Consumer>
                {(ctx) => (
                    <NavigationContainer>
                        <Stack.Navigator>
                            <Stack.Screen
                                name="Tab"
                                component={TabNav}
                                options={{ title: ctx.title }} // The title will be dynamically changed here
                            />
                            <Stack.Screen
                                name="Category"
                                component={OtherScreen}
                            ></Stack.Screen>
                            <Stack.Screen
                                name="SpecialBeerScreen"
                                component={OtherScreen}
                            ></Stack.Screen>
                        </Stack.Navigator>
                    </NavigationContainer>
                )}
            </HomeTitleContext.Consumer>
        </HomeTitleContext.Provider>
    );
}

在您的组件中，例如：HomeScreen，您设置了一个 useFocusEffect 并更改了 setTitle 中的标题，您将从上下文中获得

HomeScreen.js

import React, { useContext } from 'react';
import { useFocusEffect } from '@react-navigation/native';
import { View, Text } from 'react-native';

import { HomeTitleContext } from './HomeTitleContext';

const HomeScreen = ({ navigation }) => {
    const { setTitle } = useContext(HomeTitleContext);
    useFocusEffect(() => {
        setTitle('this is home');
    });

    return (
        <View>
            <Text>Home</Text>
        </View>
    );
};