react-native - React Native Navigation Drawer - 打开不在抽屉中的页面

Question

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

我有一个新应用程序，它使用 React Navigation Drawer 作为其主要导航方法。如何在导航到不在抽屉导航中的组件的页面中使用 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,
  },
},

我在“Interactive”中按下一个按钮，它应该导航到一个不包含在上面的配置中的组件。

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'
  }
);

现在您只需在抽屉中调用 this.props.navigation.navigate('Example') 即可导航到 YourScreen。

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