静态设置堆栈导航器的标题

Question

假设我有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>
  );
};

我想根据从BottomTabs加载的屏幕来更改Stack标题。尝试将title选项传递到BottomTabs中的单个屏幕不起作用。

如何根据从子进程加载的屏幕更改Stack导航器的标题？

Answer 1

您可以像这样自定义headerTitle：

<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道具是可用的。

Reference