react-native - React Native - 导航 5 上材料底部选项卡上的标题标题

Question

我在 Navigation 5 中有一个 Material Bottom Tabs into a Stack Navigator。

假设 dto 获取标题并将其路由到一个函数但不起作用。

功能：

function getHeaderTitle(route) {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params?.screen || 'Home';

  switch (routeName) {
    case 'Favorites':
      return 'Favorites';
    case 'Info':
      return 'Info';
  }
}

materialBottomTabs

const NavTab = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Favorites"
        component={FavoritesScreen}
        options={({route}) => ({
          tabBarLabel: 'Fav',
          tabBarIcon: () => IconFav(),
        })}
      />
      <Tab.Screen
        name="Info"
        component={InfoScreen}
        options={({route}) => ({
          headerTitle: 'Info',
          tabBarLabel: 'Info',
          tabBarIcon: () => IconInfo(),
        })}
      />
    </Tab.Navigator>

堆栈导航器

<NavigationContainer>
 <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={NavTab}
      options={({route}) => ({
        headerTitle: getHeaderTitle(route),    
      })}
    />
    <Stack.Screen
      name="Detail"
      component={ItemDetailScreen}
    />
  </Stack.Navigator>
</NavigationContainer>;

我很容易设置堆栈中列出的屏幕的标题。例子：

const ItemDetailScreen = ({route, navigation}) => {

  useEffect(() => {
    navigation.setOptions({
      headerTitle: item.title,
    });
  }, []);

但我无法将屏幕的标题设置到材料底部选项卡中。它们总是将名称设置到堆栈导航器中。我该怎么做？

标签： react-nativereact-native-navigation

Answer 1

  options={({route}) => ({
    headerTitle: getHeaderTitle(route),    
  })}

我认为应该是：

  options={({route}) => ({
    title: getHeaderTitle(route),    
  })}