javascript - 在 SwitchNavigator 中创建 StackNavigator？

Question

我有一个 createSwitchNavigator，它可以带我通过欢迎屏幕到达主仪表板。该仪表板包含一个 createBottomTabNavigator(主页、AddImage、设置)。但是，我希望每个路由名称 header 显示在顶部。创建我的 AppSwitchNavigator 时，它似乎不接受 DashboardStackNavigator。知道为什么吗？

class WelcomeScreen extends Component {} .....

class DashboardScreen extends Component{}......

class Home extends Component{}......

class AddImage extends Component{}......

class Settings extends Component{}......


//Tabs across the bottom of the screen

const DashboardTabNavigator = createBottomTabNavigator(

{

   Home, //defined in the above

   AddImage, //defined in the above

   Settings //defined in the above

},

)



const DashboardStackNavigator = createStackNavigator({

   DashboardTabNavigator: DashboardTabNavigator

})



const AppSwitchNavigator = createSwitchNavigator({

     Welcome: { screen: WelcomeScreen },

     Dashboard: { screen: DashboardStackNavigator }   

 })



const AppContainer = createAppContainer(AppSwitchNavigator);

//Export App

export default AppContainer;

Answer 1

解决方案

const DashboardTabNavigator = createBottomTabNavigator(
{   
   Home: createStackNavigator({ Home }),
   AddImage: createStackNavigator({ AddImage }),
   Settings: createStackNavigator({ Settings }),
},

为什么？

导航标题用于 StackNavigator 中。因此，在每个选项卡中使用 StackNavigator 组件是简单且正确的方法。