Как установить экранный маршрут по умолчанию в React Tab Navigation в React Native
Я хочу загрузить панель управления, чтобы она была активной вкладкой в ответной нижней вкладке Native. Навигация всякий раз, когда загружается панель инструментов, но всякий раз, когда я перехожу на панель инструментов, она перемещается на экран входящих сообщений, который является первым элементом в моей реакции на навигацию по нижней вкладке. Есть ли способ создать экран по умолчанию всякий раз, когда используются нижние вкладки экрана?
Код, который я использую для нижней навигации,
dashboard: {
screen: createBottomTabNavigator({
inbox: {
screen: Chat,
navigationOptions: ({ navigation }) => ({
title: 'Inbox',
}),
},
favourite: {
screen: Favourite,
navigationOptions: ({ navigation }) => ({
title: 'Favourite',
}),
},
dashboard: {
screen: Dashboard,
navigationOptions: ({ navigation }) => ({
title: 'Home',
initialRouteName: 'dashboard'
}),
},
setting: {
screen: SettingScreen,
navigationOptions: ({ navigation }) => ({
title: 'Setting',
}),
},
survey: {
screen: NutritionistSurvey,
navigationOptions: ({ navigation }) => ({
title: 'Survey',
}),
},
}),
navigationOptions: ({ navigation }) => ({
title: 'Dashboard',
}),
},
Несмотря на то, что навигация работает совершенно нормально, мне просто нужен способ загрузки экрана панели инструментов всякий раз, когда пользователь переходит на панель инструментов.
Ответы 3
У вас есть 2 экрана с названием «панель инструментов», bottomTabNavigator и экран панели инструментов, поэтому, когда вы пытаетесь перейти к панель приборов, реагирующая навигация перейдет на первую вкладку вашего bottomTabNavigator.
Переименуйте bottomTabNavigator, и он должен работать:
dashboardTabs: {
screen: createBottomTabNavigator({
inbox: {
screen: Chat,
navigationOptions: ({ navigation }) => ({
title: 'Inbox',
}),
},
favourite: {
screen: Favourite,
navigationOptions: ({ navigation }) => ({
title: 'Favourite',
}),
},
dashboard: {
screen: Dashboard,
navigationOptions: ({ navigation }) => ({
title: 'Home',
initialRouteName: 'dashboard'
}),
},
setting: {
screen: SettingScreen,
navigationOptions: ({ navigation }) => ({
title: 'Setting',
}),
},
survey: {
screen: NutritionistSurvey,
navigationOptions: ({ navigation }) => ({
title: 'Survey',
}),
},
}),
navigationOptions: ({ navigation }) => ({
title: 'Dashboard',
}),
},
Вы можете добавить initialRouteName в createBottomTabNavigator, я решу вашу проблему
const MyApp = createBottomTabNavigator(
{
Inbox: {
screen: Chat,
navigationOptions: ({ navigation }) => ({
title: "Inbox"
})
},
Favourite: {
screen: Favourite,
navigationOptions: ({ navigation }) => ({
title: "Favourite"
})
},
Dashboard: {
screen: Dashboard,
navigationOptions: ({ navigation }) => ({
title: "Home"
})
}
},
{
initialRouteName: "Dashboard"
}
);
Для тех, кто столкнулся с этой проблемой в 2022 году, версия 6.x React Navigation, правильный способ — указать реквизит initalRouteName в компоненте Navigator. Ссылка на документы
Это решило мою проблему Спасибо