反应导航，获取嵌套路由的名称

Question

我在下面有一个嵌套的抽屉导航器，我在标题中使用了一个自定义组件：

header: props => {
    return <DrawerHeader {...props} />;
},

当我尝试从我的标题中的道具访问当前路线时，如下所示，标题是undefined，我怎样才能获得当前路线？

  render() {
    const {
      navigation,
      videos,
      search: {term},
      scene: {
        route: {routeName: title}, // undefined
      },
    } = this.props;
    return (
      <View>
        <View style={styles.container}>

航海家：

function DrawerStack() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen
                name="VideoEpisodesScreen"
                component={VideoEpisodesScreen}
            />
            <Drawer.Screen name="TestYourselfScreen" component={TestYourselfScreen} />
            <Drawer.Screen name="MyResultsScreen" component={MyResultsScreen} />
            <Drawer.Screen name="AboutScreen" component={AboutScreen} />
            <Drawer.Screen name="TestsScreen" component={TestsScreen} />
            <Drawer.Screen
                name="BookmarkedVideosScreen"
                component={BookmarkedVideosScreen}
            />
        </Drawer.Navigator>
    );
}

export default function AppNavigator() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                    options={stackOptions}
                />
                <Stack.Screen
                    name="Drawer"
                    component={DrawerStack}
                    options={drawerOptions}
                />
                <Stack.Screen
                    name="MyResultsScreen"
                    component={MyResultsScreen}
                    options={options}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

Answer 1

有趣的是，我遇到了完全相同的问题，我在一个小时后发现了你的问题。本质上，问题在于 React Navigation 只会为您提供包含标题的导航器的当前路线。如果你有一个嵌套的导航器，你将无法获得它。

看起来这有点有意为之，但我发现通过手动查询导航器的状态，您可以深入到“最深”的导航器路线。请注意，虽然这适用于 react-navigation 5，但将来可能无法使用。

您可以像这样迭代查询嵌套状态：

const state = navigation.dangerouslyGetState();
let actualRoute = state.routes[state.index];

while (actualRoute.state) {
    actualRoute = actualRoute.state.routes[actualRoute.state.index];
}

请注意，这非常脆弱，但它似乎对我的用例来说已经足够好了。您应该考虑在 react-navigation 存储库上创建问题/功能请求，以正式支持此用例。