反应本机导航抽屉 - 打开页面不在抽屉中

Question

我是React Native开发的新手，很抱歉，如果这看起来很明显。

我有一个新的应用程序，使用反应导航抽屉作为其主要的导航方法。如何在导航到导航抽屉中不存在的组件的页面中具有onPress功能？

this.props.navigation.navigate（'example'）似乎只适用于抽屉中定义的页面。

我的抽屉配置：

const MyApp = createDrawerNavigator({
  Interactive: {
    screen: (props) => <Interactive {...props} 
       list={[
    { name: "First" },
    { name: "Second" },
    { name: "Third" },
    { name: "Fourth" },
    { name: "Fifth" },
    { name: "Sixth" },
    { name: "Seventh" },
    { name: "Eighth" },
  ]} />,
  },
  Settings: {
    screen: SettingsScreen,
  },
},

我按下“交互式”中的按钮，该按钮应导航到上面配置中未包含的组件。

Answer 1

您可以在应用程序中使用多个导航器（通常情况就是如此），实际上每个要导航到的屏幕都应该在导航器中定义。导航器中的每个键可以是单个屏幕或其他导航器（Stack-，Drawer-，Tab-或SwitchNavigator）。

const DrawerRoutes = createDrawerNavigator({
  // your drawer navigator implementation ... 
});

const MyApp = createSwitchNavigator(
  {
    Drawer: DrawerRoutes,
    Example: YourScreen, // this would be the screen you want to navigator to
  },
  {
    initialRouteName: 'Drawer'
  }
);

现在，只需从Drawer中调用this.props.navigation.navigate（'Example'）即可导航到YourScreen。

在反应导航应用程序中，嵌套导航器的大型组合并不罕见，但总有一个根导航器。