时间戳

首页 > 解决方案 > 当我们在 React-Native 的抽屉导航中单击标题中的图标时，如何在主屏幕顶部加载另一个屏幕

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

问题描述

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

在此处输入图像描述

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

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

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

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

在此处输入图像描述

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

在此处输入图像描述

如何做到这一点，请帮助

提前致谢

标签： react-navigationreact-navigation-stackreact-navigation-drawer

解决方案

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

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

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

推荐阅读