0

假设我有 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根据从孩子加载的屏幕更改导航器的标题？

4

1 回答 1

0

您可以像这样自定义 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道具可用。

参考

于 2020-03-15T15:11:32.850 回答