在反应导航中管理多个导航器（堆栈导航器和 bottomtabsnavigator）

Question

我有一个 React 本机应用程序，它有一个堆栈导航器和一个底部选项卡导航器。底部选项卡导航器和堆栈导航器之间有共同的屏幕。这是结构：

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"
        }
    }
})

现在，如果我直接从底部选项卡导航器移动到阅读屏幕并移动到堆栈导航器的创建图像屏幕，当我按下后退按钮时，我会回到默认屏幕探索屏幕吗？

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

Answer 1

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

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




const TabsNavigator = createBottomTabNavigator({
    Explore: {
        screen: ExploreScreen,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadScreen,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
})

Answer 2

我会这样做

    const ExploreNavigator = createStackNavigator({
    ExplorePrimary: {
        screen: ExploreScreen
    },
    ReadPrimary: {
        screen: ReadScreen
    },
    CreateImagePrimary: {
        screen: CreateImageScreen
    }
  })

  const ReadNavigator = createStackNavigator({
    ExplorePrimary: {
        screen: ExploreScreen
    },
    ReadSecond: {
        screen: ReadScreen
    },
    CreateImageSecond: {
        screen: CreateImageScreen
    }
  })




  const TabsNavigator = createBottomTabNavigator({
    ExploreTab: {
        screen: ExploreNavigator,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadNavigator,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
  })