Question

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

我是开发本机的新手。

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

在此示例中，我要在主页上导入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,
    },
  },
})

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

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

2 个答案: