如何将名称道具从 BottomTabs 传递到 Stack.Screen headerTitle？

Question

我想将当前选项卡的名称传递给屏幕的 headerTitle。这是我从 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>
    )
}

这是我的堆栈。我在网站上找到了一行代码，它显示了将道具传递给屏幕的选项，比如 options={{ headerTitle: props => <LogoTitle {...props} /> }}。我尝试了类似的东西 - 将 LogoTitle 替换为 Tabs - 我收到一条错误消息 Error: Another navigator is already registered for this container.

function AppTabs() {
    const { colors } = useTheme();
    const theme = useTheme();
    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: colors.tab,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold'
                }
            }}
        >
            <Stack.Screen
                name="Tabs"
                component={Tabs}
                options={({ navigation, route }) => ({
                    headerLeft: () => (
                        <Icon.Button
                            name="ios-menu"
                            size={25}
                            backgroundColor={colors.tab}
                            onPress={() => navigation.openDrawer()}
                        >

                        </Icon.Button>
                    ),
                    // Pass tab name when tab is pressed, here!

                })}
            />
            <Stack.Screen
                name="Contacts"
                component={Phone}
            />
            <Stack.Screen
                name="ContactProfile"
                component={ContactProfile}
            />
        </Stack.Navigator>

    )
}

export default AppTabs;

Answer 1

您可以为此使用 getFocusedRouteNameFromRoute 函数：

// 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>
  );
}

您可以在文档中阅读更多相关信息：https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state

如何将名称道具从 BottomTabs 传递到 Stack.Screen headerTitle？

How do I pass name props from BottomTabs to Stack.Screen headerTitle?

reactjs

react-native

react-navigation-v5