React native 在react navigation中管理多个导航器(堆栈导航器和底部选项卡导航器)

React native 在react navigation中管理多个导航器(堆栈导航器和底部选项卡导航器),react-native,react-navigation,react-navigation-stack,react-navigation-bottom-tab,React Native,React Navigation,React Navigation Stack,React Navigation Bottom Tab,我有一个react本机应用程序,它有一个堆栈导航器和一个底部选项卡导航器。底部选项卡navigator和stack navigator之间有共同的屏幕。结构如下: const ExploreNavigator = createStackNavigator({ Explore: { screen: ExploreScreen }, Read: { screen: ReadScreen }, CreateImage: {

我有一个react本机应用程序,它有一个堆栈导航器和一个底部选项卡导航器。底部选项卡navigator和stack navigator之间有共同的屏幕。结构如下:

const ExploreNavigator = createStackNavigator({
    Explore: {
        screen: ExploreScreen
    },
    Read: {
        screen: ReadScreen
    },
    CreateImage: {
        screen: CreateImageScreen
    }
})




const TabsNavigator = createBottomTabNavigator({
    ExploreTab: {
        screen: ExploreNavigator,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadScreen,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
})
现在,如果我直接从底部选项卡导航器移动到阅读屏幕,并移动到堆栈导航器的CreateImage屏幕,当我按下后退按钮时,我会返回默认屏幕,即浏览屏幕?


那么,解决这个问题的最佳方法是什么?我知道我可以创建另一个堆栈导航器并添加相关屏幕。另外,如果遵循这种方法,我可以将堆栈导航器屏幕命名为相同的吗?

我认为这不需要在粗体堆栈和底部选项卡中保留一个屏幕。所以我建议像这样

const ExploreNavigator = createStackNavigator({
    Tabs: {
        screen: TabsNavigator
    },
    CreateImage: {
        screen: CreateImageScreen
    }
})




const TabsNavigator = createBottomTabNavigator({
    Explore: {
        screen: ExploreScreen,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadScreen,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
})
我会这样做
const ExploreNavigator=createStackNavigator({
探索主要:{
屏幕:探索屏幕
},
ReadPrimary:{
屏幕:ReadScreen
},
CreateImagePrimary:{
屏幕:CreateImageScreen
}
})
const ReadNavigator=createStackNavigator({
探索主要:{
屏幕:探索屏幕
},
阅读二:{
屏幕:ReadScreen
},
CreateImageSecond:{
屏幕:CreateImageScreen
}
})
const TabsNavigator=createBottomTabNavigator({
探索选项卡:{
屏幕:ExploreNavigator,
导航选项:{
tabBarLabel:“探索”
}
},
阅读标签:{
屏幕:ReadNavigator,
导航选项:{
tabBarLabel:“阅读”
}
}

})
Hi,假设我想从ReadScreen移动到CreateImageScreen,根据导航的位置,我有两个不同的RouteName。那么,我该如何解决这个问题呢?如果您使用的是ReadTab:navigation.navigate('CreateImageSecond'),如果使用的是explore:navigation.navigate('CreateImagePrimary'),我的方法很好,如果您想在create image screenHi上保留底部选项卡,那么在我的用例中有两种情况:1。从“浏览”屏幕移动到“阅读”屏幕,再移动到“创建图像”屏幕。2.直接从读取屏幕移动到createImageScreen。那么,在您的情况下,我如何知道从何处进入ReadScreen,然后相应地更新导航器?