Реагировать заголовок заголовка навигации в навигаторе с вложенными вкладками - PullRequest
Новая
       66

Реагировать заголовок заголовка навигации в навигаторе с вложенными вкладками

2 голосов
/ 23 февраля 2020

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

Я пытался использовать onStateChange на root навигатор и 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>

1 Ответ

1 голос
/ 28 апреля 2020

У меня была похожая иерархия навигации с 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 */
    );
};
...