如何在反应导航中将抽屉放在标题上? [英] How to get drawer over the header in react navigation?

问题描述

我正在使用 React 导航.我想在屏幕的标题上显示抽屉.目前，当我打开抽屉时，我的标题没有隐藏在抽屉下面.

I am using react navigation. I want to show drawer over the header of the screen. Currently my header is not hiding below drawer when I open the drawer.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createStackNavigator, createDrawerNavigator  } from 'react-navigation';
import CategoryScreen from './CategoryScreen';
import ProductsScreen from './ProductsScreen';
import CartScreen from './CartScreen';


const drawerScreens = createDrawerNavigator ({
    Category: CategoryScreen,
    Products: ProductsScreen,
},{
    initialRouteName: 'Category'
}
)


export default AppStack = createStackNavigator(
    { 
        drawer: {
            screen: drawerScreens,
            navigationOptions: ({ navigation }) => ({
                header: <View style={styles.container}><Text>Header</Text></View>
              }),
        }, 
        cart: {screen: CartScreen} 
    },
    {
        initialRouteName: 'drawer',
    }
);

const styles = StyleSheet.create({
    container: {
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'orange',
    }
})

那么如何显示抽屉导航的抽屉重叠或覆盖的标题.

So how to show the header which is overlaped or covered with drawer of drawer navigation.

目前它看起来像这样

推荐答案

1. 您应该为您的 CategoryScreen 和 ProductScreen
创建一个新的 StackNavigator
2. 您在 CategoryScreen 和 ProductScreen 导航选项上设置标题

1. You should create a new StackNavigator for your CategoryScreen and ProductScreen
2. You set the header on CategoryScreen and ProductScreen navigation options

这就是我的意思

// wrap your screen inside the drawer into StackNavigator
const CategoryNavigator = createStackNavigator({
  CategoryList: {
    screen: CategoryScreen,
    navigationOptions: {
      title: "Category",
      header: // any custom header here
    }
  },
});

const drawerScreens = createDrawerNavigator({
  Category: CategoryNavigator,
  Products: ProductNavigator,
}, {
  initialRouteName: 'Category'
})


export default AppStack = createStackNavigator({
  drawer: {
    screen: drawerScreens,
  },
  cart: {
    screen: CartScreen
  }
}, {
  initialRouteName: 'drawer',
});

这是结果

以下将制作一个与您的屏幕截图相似的浮动标题

设置header模式为float(不需要将CategoryScreen和ProductScreen包裹到StackNavigator)

Set the header mode to float (you don't need to wrap CategoryScreen and ProductScreen into StackNavigator)

export default AppStack = createStackNavigator({
  drawer: {
    screen: drawerScreens,
  },
  cart: {
    screen: CartScreen
  }
}, {
  headerMode: 'float', // set this header mode to float so you can share the header
  initialRouteName: 'drawer',
});

如果把header模式改成float，就是这个结果

This is the result if you change the header mode to float

这篇关于如何在反应导航中将抽屉放在标题上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！