Заголовок заголовка React Navigation во вложенном навигаторе вкладок

У меня есть навигатор вкладок внутри навигатора стека, и я хочу, чтобы заголовок заголовка динамически настраивался как заголовок выбранной вкладки. Как будто есть 3 вкладки: «Главная», «Профиль», «Добавить элемент», и я хочу, чтобы заголовок заголовка был «Главная», когда на главной вкладке, «Профиль», когда на вкладке профиля.

Я пробовал использовать onStateChange в корневом навигаторе и setOptions в навигаторе вкладок, но onStateChange доступен только во вложенных навигаторах, а не во вложенных.

Их так или иначе я могу заархивировать?

Конфигурация навигатора:

const TabNav = (
   <Tab.Navigator>
      <Tab.Screen name='Home' component={HomeScreen}/>
      <Tab.Screen name='Profile' component={ProfileScreen}/>
      <Tab.Screen name='Add Item' component={AddItemScreen}/>
   </Tab.Navigator>
)

<NavigationContainer>
   <Stack.Navigator>
      <Stack.Screen name='Login' component={LoginScreen}/>
      <Stack.Screen name='App' component={TabNav}/>
   </Stack.Navigator>
</NavigationContainer>

react-native react-navigation react-navigation-stack
person Thiago Nascimento    schedule 23.02.2020    source источник
comment
Вы проверили официальную документацию? reactnavigation.org/docs/en/   -  person satya164    schedule 23.02.2020
comment
@ satya164 Я пробовал оба варианта в документации, но, похоже, ни один из них не работает. В опоре маршрута нет ключа state   -  person Thiago Nascimento    schedule 24.02.2020

Ответы (2)


arrow_upward
7
arrow_downward

У меня была аналогичная иерархия навигации с react-navigation v5, и я хотел изменить заголовок заголовка внутри представления во вложенном TabNavigator. В конце концов я добился этого, получив родительский элемент навигации StackNavigator с помощью dangerouslyGetParent(), а затем используя setOptions().

Итак, вот ваш минимальный код для одного из трех представлений внутри вашей TabNav:

import React, {useCallback} from 'react';
import { useNavigation, useFocusEffect } from '@react-navigation/native';

const HomeScreen = (props) => {

    // TabNav navigation item
    const navigation = useNavigation();

    // Effect will be triggered everytime the Tab changes 
    //      Mounting is not enough -> Tabs will not be unmount by change
    useFocusEffect(
        useCallback(() => {

            // Get StackNav navigation item
            const stackNavigator = navigation.dangerouslyGetParent();
            if(stackNavigator){

                // Actually set Title
                stackNavigator.setOptions({
                    title: "Home"
                });
            }
        }, [navigation])
    );
    return (
        /* Component Items */
    );
};
person Mika    schedule 28.04.2020
comment
работал у меня, но только тогда, когда компонент стека является последним родителем - person Camilo Santos; 07.05.2020
comment
Это правда. Вам необходимо настроить его, если у вас есть другая иерархия навигации (например, дважды вызовите опасноGetParent ()) - person Mika; 16.07.2020
comment
Спасибо, спасительный ответ - person Nisharg Shah; 09.10.2020

arrow_upward
1
arrow_downward

Из документации https://reactnavigation.org/docs/screen-options-resolution/

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

function getHeaderTitle(route) {
  // If the focused route is not found, we need to assume it's the initial screen
  // This can happen during if there hasn't been any navigation inside the screen
  // In our case, it's "Feed" as that's the first screen inside the navigator
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';

  switch (routeName) {
    case 'Feed':
      return 'News feed';
    case 'Profile':
      return 'My profile';
    case 'Account':
      return 'My account';
  }
}

<Stack.Screen
  name="Home"
  component={HomeTabs}
  options={({ route }) => ({
    headerTitle: getHeaderTitle(route),
  })}
/>
person wael    schedule 10.06.2021