Question

我有一个三层导航结构，第一层在App.js中

const AppFlow = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <AppFlow.Navigator initialRouteName={'Signin'} >
                <AppFlow.Screen name='Signin' component={SigninScreen} />
                <AppFlow.Screen name='Signup' component={SignupScreen} />
                <AppFlow.Screen name='mainFlow' component={mainFlowComponent} />
            </AppFlow.Navigator>
        </NavigationContainer>
    );
};

第二个在 mainFlowComponent 中：

const mainFlow = createBottomTabNavigator();

const mainFlowComponent = () => {
    return (
        <mainFlow.Navigator initialRouteName='showTrack'>
            <mainFlow.Screen name='showTrack' component={showTrackFlowComponent} />
            <mainFlow.Screen name='TrackCreate' component={TrackCreateScreen} />
            <mainFlow.Screen name='Account' component={AccountScreen} />
        </mainFlow.Navigator>
    );
};

showTrackComponent 中的第三个：

const showTrackFlow = createStackNavigator();

const showTrackFlowComponent = () => {
    return (
        <showTrackFlow.Navigator initialRouteName={'TrackList'} >
            <showTrackFlow.Screen name='TrackList' component={TrackListScreen} />
            <showTrackFlow.Screen name='TrackDetail' component={TrackDetailScreen} />
        </showTrackFlow.Navigator>
    );
};

现在，我需要从第一个导航器中的 SigninScreen 导航到第三个导航器中的 TrackList（向下两级）

https://reactnavigation.org/docs/nesting-navigators/ 仅显示如何向下导航 1 级

我在做

this.props.navigation.navigate('showTrack', { screen: 'TrackList'});

从登录（或注册）屏幕，我收到此错误

The action 'NAVIGATE' with payload {"name":"showTrack","params":{"screen":"TrackList"}} was not handled by any navigator

如果我导航到第二级的 TrackCreate，则不会抛出任何错误

我该怎么办？

提前致谢

拉斐尔

如何导航到嵌套导航器下两级的屏幕

0 个答案: