Переопределить заголовок заголовка 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>
  )
}

Однако заголовок теперь выглядит как Tab для каждого из экранов. Как мне переопределить этот заголовок для каждого из экранов с помощью настраиваемого текста, например «Домой», «Категория» и т. Д. c.

Answer 1

Если я правильно понимаю вашу проблему, вы хотели изменить заголовок стека при изменении вкладки. В этом случае вы можете использовать React Context для управления им.

(я также помещаю этот код в Snack https://snack.expo.io/@gie3d / change-header-from-tab )

edit: 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, который вы получите из контекста

Главный экран. 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>
    );
};

Answer 2

Используйте getFocusedRouteNameFromRoute, как указано в документации по реакции-навигации в разделе Настройка параметров родительского экрана на основе состояния дочернего навигатора для доступа к информации об экранах во вложенных навигаторах.

Измените это строка

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

к следующему (добавление options prop):

<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';