当我们在 React-Native 的抽屉导航中单击 header 中的图标时，如何在主屏幕顶部加载另一个屏幕

Question

我创建了一个带主页和购物车菜单的抽屉式导航

当我点击 header 上的购物车符号时，我想在此主屏幕顶部打开单独的页面。我写了如下代码

const DrawerNavigationCon=createDrawerNavigator({
  Home:HomeNavigation,
  Cart:CartNavigation
},{
 overlayColor:'gray',
 initialRouteName:'Home'
})

我已经编写了从主页导航到购物车的代码，如下所示

const CartNavigation = createStackNavigator({
  Cart:CartPage,
},
{
  defaultNavigationOptions:({navigation})=>{
    return{
      headerStyle:{
        backgroundColor:'rgb(28, 34, 36)'
      },
      headerTitle:'Cart',
      headerTintColor:'#fff',
      headerTitleStyle:{
        fontWeight:'bold',
        textAlign:'center',
        flex:1
      },
      headerLeft:(       
        <View>
        <Icons name="md-menu" style={{fontSize:35,color:'white',paddingLeft:10}} onPress={()=>navigation.openDrawer()} />
      </View>
      ),
      headerRight:(
        <View>
          <Icons name="md-cart" style={{fontSize:30,color:'white',paddingRight:10}} onPress={() => navigation.navigate('Cart')} />
        </View>
      )
    }
  }
})

您可以在 <Icons> 标签中看到 onPress={() => navigation.navigate('Cart')}

当我点击购物车时，它的打开方式如下

但是当我像下面这样点击购物车时，我想在主页顶部加载另一个页面

这样怎么办，求助

提前致谢

Answer 1

const DrawerNavigationCon= createStackNavigator({
    Home:createDrawerNavigator({
       Home:HomeNavigation,
      },{
         overlayColor:'gray',
         initialRouteName:'Home'
      }),
    Cart:{
          screen : CartPage
        }
    })

如图所示使用堆栈配置并根据要求配置堆栈你可以从上面的代码中得到一个想法。

基本想法是使用 stackNavigator 作为父堆栈，将抽屉导航器作为该 stackNavigator 的子级，并将另一条路线与该抽屉导航器平行放置，这样您现在可以在抽屉导航器顶部打开另一个屏幕。

当我们在 React-Native 的抽屉导航中单击 header 中的图标时，如何在主屏幕顶部加载另一个屏幕

How to load another screen on top of Home screen when we click on icon in header in Drawer navigation in React-Native

react-navigation

react-navigation-drawer

react-navigation-stack