Reactjs 如何将名称道具从底部选项卡传递到堆栈。屏幕标题？

我想将当前选项卡的名称传递给屏幕的标题。这是我从reactnavigation.org网站获得的一种设置。这是我的代码设置

const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();

这些是我的标签

function Tabs() {
    const { colors } = useTheme();
    const theme = useTheme();
    return (
        <Tab.Navigator
            initialRouteName="Home"
            activeTintColor='#fff'
        >
            <Tab.Screen
                name="Home"
                component={Home}
                options={{
                    tabBarLabel: 'Home',
                    tabBarColor: colors.tab,
                    tabBarIcon: ({ color }) => (
                        <Ionicons name="ios-home" color={color} size={26} />
                    ),
                    tabBarBadge: 5,
                }}
            />
            <Tab.Screen
                name="Profile"
                component={Profile}
                options={{
                    tabBarLabel: 'Profile',
                    tabBarColor: colors.tab,
                    tabBarIcon: ({ color }) => (
                        <Ionicons name="ios-person" color={color} size={26} />
                    ),
                }}
            />
        </Tab.Navigator>
    )
}

---

您可以使用

GetFocusedRootNameFromRoute

函数来实现以下目的：

// Import getFocusedRouteNameFromRoute
import {
  NavigationContainer,
  getFocusedRouteNameFromRoute,
} from '@react-navigation/native';

function getHeaderTitle(route) {
  // In case the focused route is not found, assume it's the first screen
  return getFocusedRouteNameFromRoute(route) ?? 'Home';
}

function AppTabs() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Tabs"
        component={Tabs}
        options={({route}) => ({
          title: getHeaderTitle(route),
        })}
      />
      <Stack.Screen name="Contacts" component={Phone} />
      <Stack.Screen name="ContactProfile" component={ContactProfile} />
    </Stack.Navigator>
  );
}

//导入GetFocusedRootNameFromRoute
进口{
导航容器，
GetFocuseDrudoteNameFromRoute，
}来自'@react导航/native'；
功能getHeaderTitle（路线）{
//如果找不到聚焦路线，则假设它是第一个屏幕
从路线返回GetFocusedRootNamefromRoute（路线）？“Home”；
}
函数AppTabs（）{
返回(
({
标题：getHeaderTitle（路线），
})}
/>
);
}

您可以在文档中了解更多信息：

// Import getFocusedRouteNameFromRoute
import {
  NavigationContainer,
  getFocusedRouteNameFromRoute,
} from '@react-navigation/native';

function getHeaderTitle(route) {
  // In case the focused route is not found, assume it's the first screen
  return getFocusedRouteNameFromRoute(route) ?? 'Home';
}

function AppTabs() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Tabs"
        component={Tabs}
        options={({route}) => ({
          title: getHeaderTitle(route),
        })}
      />
      <Stack.Screen name="Contacts" component={Phone} />
      <Stack.Screen name="ContactProfile" component={ContactProfile} />
    </Stack.Navigator>
  );
}