Как я могу динамически изменять заголовки вкладок с помощью React Navigation?

Question

Я создаю приложение на React Native, используя библиотеку React Navigation. Проблема, с которой я столкнулся, заключается в том, что при визуализации навигатора вкладок внутри навигатора стека (HomeStack) каждая отдельная вкладка сохраняет заголовок родительского навигатора стека, "Главная".

Прочитав документацию по навигаторам вложенности (https://reactnavigation.org/docs/nesting-navigators/), я попытался сделать каждую вкладку в навигаторе вкладок своим собственным стеком, удалив заголовок в родительском стеке (используяoptions={{headerShown: false}}) и установка отдельного заголовка для каждого стека вкладок (используя options={{ headerShown: true), но это просто полностью удаляет заголовок из каждой вкладки.

Текущий поток заключается в том, что пользователь открывает приложение, направляется в стек входа, а затем, когда он нажимает кнопку "Войти", приложение отображает HomeStack, в котором отображаются различные параметры вкладки. Однако каждая вкладка имеет один и тот же заголовок "Главная", хотя каждая вкладка представляет собой свой собственный уникальный стек.

Вот текущий макет моих навигаторов (с контекстом аутентификации, охватывающим все):

//Home Screen (nested Tab Navigator)
function HomeScreen() {
  return (
    <Tab.Navigator >
      <Stack.Screen name="Profile" component={Profile}/>
      <Stack.Screen name="Goals" component={Goals}/>
      <Stack.Screen name="Board" component={Board}/>
      <Stack.Screen name="People" component={People}/>
    </Tab.Navigator>
  );

//Child Stacks (within Tab Navigator -- all follow same format)
function Profile() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  )
}

//Parent Navigation Container
return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <Stack.Navigator>
          {state.userToken == null ? (
            <Stack.Screen name="SignIn" component={SignInScreen} />
          ) : (
              <Stack.Screen name="Home" component={HomeScreen}/>
            )}
        </Stack.Navigator>
      </NavigationContainer >
    </AuthContext.Provider >
  );

Этот вопрос задавался ранее, и решение использовало добавление обновленного аргумента во время первоначального объявления стека (обсуждается здесь: https://github.com/react-navigation/react-navigation/issues/741), но способ, которым Функция навигаторов изменилась с момента последнего обновления (версия 5). Теперь добавление аргументов к вашему первоначальному объявлению Stack возвращает ошибку:

Конечная цель этого состоит в том, чтобы каждая вкладка действовала как собственный стек и отображала заголовок с уникальным заголовком / кнопками действий в верхнем левом / правом углах экрана. Я до сих пор не понимаю, как этого добиться с новыми изменениями, поэтому приветствуются любые рекомендации!

Answer 1

function getHeaderTitle(route) {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params?.screen || 'Profile';

  switch (routeName) {
    case 'Profile':
      return 'My profile';
    case 'Goals':
      return 'Goals';
    case 'Board':
      return 'Board';
    case 'People':
      return 'People';
  }
}

// ...

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

https://reactnavigation.org/docs/screen-options-resolution