如何在反应导航中使抽屉位于标题上方？

Question

我正在使用反应导航。我想在屏幕的标题上方显示抽屉。当前，当我打开抽屉时，标题没有隐藏在抽屉下方。

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

因此，如何显示与抽屉导航重叠或覆盖的标题。

目前看起来像这样

Answer 1

1. 您应该为CategoryScreen和创建一个新的StackNavigatorProductScreen
2. 您设置标题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时的结果