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

Я создаю приложение на 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 возвращает ошибку: введите описание изображения здесь

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


react-native javascript react-navigation react-navigation-bottom-tab react-navigation-stack
person Satchel Smidt    schedule 13.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward 

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#setting-parent-screen-options-based-on-child-navigators-state

person satya164    schedule 15.03.2020
comment
Доступ к свойству «состояние» объекта «маршрут» не поддерживается. Если вы хотите получить имя целевого маршрута, используйте вместо него помощник getFocusedRouteNameFromRoute: reactnavigation.org/docs/screen-options-resolution/ - person Nauman Moazzam; 07.07.2021