react-native – 如何在反应导航中将抽屉放在标题上？

我正在使用反应导航.我想在屏幕的标题上显示抽屉.当我打开抽屉时,我的标题不会隐藏在抽屉下面.

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

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

目前看起来像这样

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

这就是我的意思

// 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',
});

这是结果

以下将创建一个与您的屏幕截图类似的浮动标题

将标题模式设置为float(您不需要将CategoryScreen和ProductScreen包装到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',
});

如果将标题模式更改为float,则会出现此结果