反应导航 - 如何更改初始屏幕或根屏幕？

Question

我正在使用带有反应导航的反应本机进行导航。我添加了初始屏幕作为初始屏幕：

const AppNavigator = createDrawerNavigator(
  {
    Splash: SplashScreen,
    Home: HomeScreen,
    Details: deScreen,
  },
  {
    initialRouteName: "Splash",
    contentComponent: SideMenuScreen
  }
);

当我使用 android 中的后退按钮单击返回或调用以下函数返回时，我正在导航到详细信息屏幕：

this.props.navigation.goBack();

goBack() 关闭当前屏幕并打开初始屏幕，即启动屏幕。

如何更改根或初始屏幕？

Answer 1

您可能不希望用户能够导航到您的启动画面。这意味着您并不真的希望该屏幕成为抽屉导航器的一部分。

为此，react-navigation 有一个SwitchNavigator，允许您在不同的导航树之间切换。

这看起来像：

const AppNavigator = createDrawerNavigator({
  Home: HomeScreen,
  Details: deScreen,
},
{
  initialRouteName: "Home",
  contentComponent: SideMenuScreen
});

const rootNavigator = createSwitchNavigator({
  Splash: SplashScreen,
  App: AppNavigator
});

然后，您可以在加载完成后导航到 App，返回按钮将始终返回到 Home，而不是初始屏幕。

Answer 2

只需更改createDrawerNavigator 的第一个对象内的屏幕顺序或更改initialRouteName 的属性：

const AppNavigator = createDrawerNavigator(
  {
    Splash: SplashScreen,
    Home: HomeScreen,
    Details: deScreen,
  },
  {
    initialRouteName: "Home",
    contentComponent: SideMenuScreen
  }
);

或者

const AppNavigator = createDrawerNavigator(
      {
        Home: HomeScreen,
        Splash: SplashScreen,
        Details: deScreen,
      },    
 );

Answer 3

默认情况下，在Drawer 和Tab 导航器中，触发navigation.goBack() 将返回到该导航器的initialRouteName。

要回答您的问题，您有两种方法可以解决此问题：

1) 将您的 drawerNavigator 包裹在一个 SwitchNavigator 中，其中您有 2 个屏幕，SplashScreen 和您的 drawerNavigator。然后，您的抽屉将导航到他的 initalRouteName，即您的 Home。

2) 将您的 HomeScreen 和 DetailsScreen 包裹在另一个导航器（例如 StackNavigator）中，然后通过它返回。

更新

解决方案 #2 的示例是：

const homeStack=const HomeStack = createStackNavigator({
                                       HomeScreen:
                                            { screen: HomeScreen },
                                       DetailsScreen:
                                            {screen:DetailsScreen}                            
                                        },                   
                                        )
const AppNavigator = createDrawerNavigator(


{
    Splash: SplashScreen,
    Home:{screen:HomeStack},
  },
  {
    initialRouteName: "Splash",
    contentComponent: SideMenuScreen
  }
);