如何在 React Native 中的 React Tab Navigation 中设置默认屏幕路由
How to set a default screen Route in react Tab Navigation in React Native
我想将仪表板加载为 React 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',
}),
},
即使导航工作完全正常,我只需要一种方法来在用户导航到仪表板时加载仪表板屏幕。
您有 2 个名为 dashboard 的屏幕,bottomTabNavigator 和 Dashboard 屏幕,因此当您尝试导航到 dashboard 时,react-navigation 将导航到 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',
}),
},
你可以在createBottomTabNavigator中添加initialRouteName我来解决你的问题
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 年面临此问题的人,v6.x 的 React Navigation,正确的方法是在 Navigator
组件中指定 initalRouteName
prop。 Link to docs
我想将仪表板加载为 React 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',
}),
},
即使导航工作完全正常,我只需要一种方法来在用户导航到仪表板时加载仪表板屏幕。
您有 2 个名为 dashboard 的屏幕,bottomTabNavigator 和 Dashboard 屏幕,因此当您尝试导航到 dashboard 时,react-navigation 将导航到 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',
}),
},
你可以在createBottomTabNavigator中添加initialRouteName我来解决你的问题
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 年面临此问题的人,v6.x 的 React Navigation,正确的方法是在 Navigator
组件中指定 initalRouteName
prop。 Link to docs