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

时间:2020-03-15 14:13:04

标签: react-native react-navigation react-navigation-v5

假设我有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 :(得分: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道具可用。

Reference