Статическая настройка заголовка стека навигатора - PullRequest
Новая
       3

Статическая настройка заголовка стека навигатора

0 голосов
/ 15 марта 2020

Предположим, у меня есть 2 навигатора, как указано ниже: 

const StackNavigator = () => {
  const theme = useTheme();

  return (
    <Stack.Navigator
      initialRouteName="BottomTabs"
      headerMode="screen"
      screenOptions={{
        header: Header,
      }}>
      <Stack.Screen
        name="BottomTabs"
        component={BottomTabs}
        options={({route, navigation}) => {
          console.log('get bottom tab title', route, navigation)
          const routeName = route.state
            ? route.state.routes[route.state.index].name
            : 'NOTITLE';
          return {headerTitle: routeName};
        }}
      />
    </Stack.Navigator>
  );
};

Этот Stack навигатор загружает BottomTabs, который является другим навигатором: 

const BottomTabs = props => {
  const theme = useTheme();
  const tabBarColor = theme.dark
    ? overlay(6, theme.colors.surface)
    : theme.colors.surface;

  return (
    <Tab.Navigator
        initialRouteName="TaskList"
        shifting={true}
        activeColor={theme.colors.primary}
        inactiveColor={color(theme.colors.text)
          .alpha(0.6)
          .rgb()
          .string()}
        backBehavior={'initialRoute'}
        sceneAnimationEnabled={true}>
        <Tab.Screen
          name="TaskList"
          component={TaskListScreen}
          options={{
            tabBarIcon: ({focused, color}) => (
              <FeatherIcons color={color} name={'check-square'} size={23} />
            ),
            tabBarLabel: 'InboxLabel',
            tabBarColor,
            title: 'Inbo title',
          }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarIcon: ({focused, color}) => (
              <FeatherIcons color={color} name={'settings'} size={23} />
            ),
            tabBarLabel: 'SeetingsLabel',
            tabBarColor,
            title: 'Settings title',
          }}
        />
      </Tab.Navigator>
  );
};

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

Как изменить Stack заголовок навигатора в зависимости от экрана, загруженного с дочернего экрана?

1 Ответ

0 голосов
/ 15 марта 2020

Вы можете настроить заголовок заголовка следующим образом: 

<Stack.Screen
        name="BottomTabs"
        component={BottomTabs}
        options={({route}) => {
          let title;
          const routeName = route.state
            ? route.state.routes[route.state.index].name
            : route.params && route.params.screen
            ? route.params.screen
            : 'TaskList';
          switch (routeName) {
            case 'TaskList':
              title = 'Tasks screen';
              break;
            case 'Settings':
              title = 'Settings screen';
              break;
            default:
              return routeName;
          }
          return {headerTitle: title};
        }}
      />

важное примечание: route.state не определено перед любой навигацией. после этого, стек создает его в состоянии навигации, и ваш экран name prop доступен.

Ссылка

...