Question

我正在使用react native和react导航进行导航。我将初始屏幕添加为初始屏幕：

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

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

this.props.navigation.goBack();

goBack（）关闭当前屏幕并打开初始屏幕，即初始屏幕。

如何更改根目录或初始屏幕？

Answer 1

只需更改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 2

您可能不希望用户能够导航到您的启动屏幕。这意味着您实际上并不希望将该屏幕作为抽屉式导航器的一部分。

为此，react-navigation具有SwitchNavigator，可让您在不同的导航树之间进行切换。

这看起来像：

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

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

加载完成后，您可以导航至App，并且后退按钮将始终返回Home，而不是初始屏幕。

Answer 3

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

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

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

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

更新

解决方案2的示例为：

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


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

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

3 个答案: