Question

我在导航5的堆栈导航器中具有“材料底部”选项卡。

假设d获得标题并通过功能将其路由，但不起作用。

功能：

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>

stackNavigator

<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,
    });
  }, []);

但是我不能将屏幕标题设置在底部的材料标签中。它们始终在堆栈导航器中设置名称。我该怎么办？

Answer 1

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

我认为应该是：

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

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

1 个答案: