Создать StackNavigator в SwitchNavigator?

Question

У меня есть createSwitchNavigator, который переносит меня через экран приветствия на главную панель инструментов.Эта панель содержит createBottomTabNavigator (Домой, AddImage, Настройки).Тем не менее, я бы хотел, чтобы заголовки имен маршрутов отображались в верхней части.При создании моего 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 - это зарезервированное ключевое слово в реагирующей навигации, которое не задокументировано должным образом.