将堆栈导航与抽屉导航一起使用总是在主页中结束

Question

首先，对标题感到抱歉。我不知道该怎么解释我的目的。我有一个抽屉导航，里面有一个堆栈导航。我这样做的原因是因为我想要一个SinglePage 和CommentPage，它们在离开时将被卸载。我的主要导航是抽屉导航。对我来说，问题是如果我进入抽屉导航内的一个屏幕，然后从那里进入SinglePage（通过点击一篇文章），现在如果我返回，它会全部回到主页而不是上一页，即另一个抽屉导航页面。

我已经尝试过更改路线的顺序，但这并没有帮助。这是我正在使用的代码：

//This is my Routes file which is located in my project root folder
//Here is the Stack Navigator

const SinglePageNavigator = createStackNavigator({

    Home: { screen: Home },
    SinglePage: { screen: SinglePage },
    CommentPage: { screen: Comments },

},

{
    initialRouteName: 'Home',
    mode: "card",
    headerMode: "none",
}
);


const styles = StyleSheet.create({
    drawerLabelStyle: {
        fontFamily: 'MV_Waheed',
        fontWeight: '200',
        fontSize: 16,
        flex: 1,
        alignItems: 'flex-end'
    }
});

//And here is my Drawer Navigation. I have removed some screens

  const TopLevelNavigator = createDrawerNavigator({

    Home: {screen: SinglePageNavigator, navigationOptions: {
    title: 'Home',
    }},

    Catpage: {screen: CatPage, navigationOptions: {title: 'News'}, params: {catID:1000, thisRouteName: 'News'}},

    Catpage: {screen: CatPage, navigationOptions: {title: 'Entertainment'}, params: {catID:1000, thisRouteName: 'Entertainment'}},

},

{
    hideStatusBar: false,
    initialRouteName: 'Home',
    drawerPosition: 'right',
    drawerBackgroundColor: '#2a292d',
    overlayColor: '#2a292d',
    contentOptions: {
        activeTintColor: '#fff',
        inactiveTintColor:'#fff' ,
        activeBackgroundColor: '#ff4136',
        labelStyle: styles.drawerLabelStyle,
    },
},

  );

  const AppContainer = createAppContainer(TopLevelNavigator);

如图所示，除了主页之外，我的抽屉导航接收一个名为 CatsPage 的页面，然后接收一个参数，并根据该参数进行 API 调用并获取数据。现在在里面，我有一个按钮可以转到查看那篇文章的数据的单页。每次我回去时，单页都会被卸载。它按预期工作。但这里的问题是，如果我在娱乐页面中并从那里打开一篇文章并返回，它会返回首页而不是娱乐。我无法理解为什么会这样。我确实从 Stack navigator 中删除了 initialRouteName: Home，认为这可能是问题所在，但这也无济于事。任何帮助表示赞赏。谢谢！

Answer 1

同时使用same page 不是一个好主意。它可能无法按预期工作。同样的事情routename也不好。

你可以试试'createStackNavigator'

const MainNavigator = createStackNavigator({

    Drawers: { screen: TopLevelNavigator }

});
const AppContainer = createAppContainer(MainNavigator);