如何在Expo中正确使用stacknavigator和抽屉式导航器

Question

我正在开发与expo的本机应用程序。

我是React Native的开发新手。

任何人都可以向我解释如何正确使用嵌套的导航？

在此示例中，我正在主页上导入SearchList。可以！！但是在搜索列表中，我想移至其他页面，依此类推。

使用stackNavigator可能有效，但是当我使用抽屉式导航器时，我不知道该怎么做。

   import SearchList from './Searches/search';

   const DrawerNavigatorExample = createDrawerNavigator({
      Home:{
        screen:HomeScreen,
        navigationOptions: {
          header: null
        }
      },
      Info:{
        screen:SearchList
      },
    },{
        initialRouteName: 'Home',
        drawerType: 'slide',
        contentComponent: Page2ComponentExample,
        drawerBackgroundColor: '#4eb6ce'
    });

    export default createAppContainer(DrawerNavigatorExample);

Answer 1

只需为SearchList创建一个堆栈导航器

const SearchStack = createStackNavigator({
  SearchList: {
    screen: SearchList,
  },
  Details: {
    screen: Details,
  },
});

之后，只需使用抽屉中的纸叠

const DrawerNavigatorExample = createDrawerNavigator({
  Home:{
    screen:HomeScreen,
    navigationOptions: {
      header: null
    }
  },
  Info:{
    screen: SearchStack //here
  },
},{
  initialRouteName: 'Home',
  drawerType: 'slide',
  contentComponent: Page2ComponentExample, 
  drawerBackgroundColor: '#4eb6ce'
});

Answer 2

您基本上需要提及辅助导航名称而不是屏幕名称。让我举一个例子。

const myDrawerNavigator = createDrawerNavigator(
  {
    Home: { screen: YOUR_HOME },
  },
  {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width * 0.75
  }
)

const RootStack = createStackNavigator({
  SplashScreen: {
    screen: SplashScreen,
    navigationOptions: {
      header: null,
    },
  },
  SomeName: {
    screen: myDrawerNavigator ,
    navigationOptions: {
      header: null,
    },
  },
})

根据您的要求，您可以尝试将一个导航放到另一个导航中。无论如何，它都认为合适。