Expo中如何正确使用stacknavigator和drawernavigator答案

【问题标题】：How to properly use stacknavigator and drawernavigator in ExpoExpo中如何正确使用stacknavigator和drawernavigator
【发布时间】：2020-03-21 17:36:11
【问题描述】：

我正在开发带有 expo 的 react 原生应用程序。

我是 react native 开发的新手。

谁能解释一下如何正确使用嵌套导航？

在这个例子中，我在我的主页上导入 SearchList。它工作正常！但在搜索列表中我想移动到其他页面等等。

使用 stackNavigator 可能会起作用，但是当我使用drawerNavigator 时，我不知道该怎么做。

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

【问题讨论】：

标签： react-native react-navigation expo

【解决方案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'
});

【讨论】：

我按照你说的方式试过了，但现在我在第二个屏幕上看不到后退按钮。你知道为什么吗？它仅在标题中显示白色背景

【解决方案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,
    },
  },
})

根据您的要求，您可以尝试将一个导航放在另一个导航中。反正觉得合适。

【讨论】：

是的！太棒了。我不知道为什么它被否决