如何在 React Native 中的 React Tab Navigation 中设置默认屏幕路由

Question

我想将仪表板加载为 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',

        }),


    },

即使导航工作完全正常，我只需要一种方法来在用户导航到仪表板时加载仪表板屏幕。

Answer 1

您有 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',
        }),
    },

Answer 2

你可以在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"
      }
    );

Answer 3

对于那些在 2022 年面临此问题的人，v6.x 的 React Navigation，正确的方法是在 Navigator 组件中指定 initalRouteName prop。 Link to docs

如何在 React Native 中的 React Tab Navigation 中设置默认屏幕路由

How to set a default screen Route in react Tab Navigation in React Native

react-native

native

react-navigation

react-navigation-stack