在SwitchNavigator中创建StackNavigator？

Question

我有一个createSwitchNavigator，它将带我进入欢迎屏幕，进入主仪表板。该仪表板包含createBottomTabNavigator（主页，AddImage，设置）。但是，我希望每个routname标头都显示在顶部。创建我的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组件是简单正确的方法。

Answer 2

我有一个类似的问题，事实证明，命名一条路由Home是原因。将密钥重命名为HomeScreen后，它就可以正常工作。

在反应导航中，Home似乎是某种保留关键字，没有正确记录。