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将仅向您提供包含标头的导航器的当前路线。如果您有嵌套的导航器，则将无法获得它。

这似乎是故意的，但是我发现通过手动查询导航器的状态，可以深入到“最深”的导航器路线。请注意，虽然这适用于反应导航5，但将来可能无法使用。

您可以像这样反复查询嵌套状态：

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

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

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

Answer 2

我认为在反应导航5中，您可以从this.props

访问路线

const { route } = this.props;

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

2 个答案: