React native 如何在react导航中使抽屉位于标题上方？

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

从“React”导入React；
从“react native”导入{View，Text，StyleSheet}；
从“反应导航”导入{createStackNavigator，createDrawerNavigator}；
从“/CategoryScreen”导入类别屏幕；
从“/ProductsScreen”导入ProductsScreen；
从“/CartScreen”导入CartScreen；
const drawerScreens=createDrawerNavigator({
类别：分类屏幕，
产品：ProductsScreen，
},{
initialRouteName:“类别”
}
)
导出默认AppStack=createStackNavigator(
{ 
出票人：{
屏幕：抽屉屏幕，
导航选项：（{navigation}）=>({
标题：标题
}),
}, 
购物车：{screen:CartScreen}
},
{
initialRouteName:“抽屉”，
}
);
const styles=StyleSheet.create({
容器：{
身高：100，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“橙色”，
}
})

在我的例子中，我制作了自己的标题组件，并在我想要的每个页面中使用它。它使我能够自定义每页的标题

绝对是走后门，我希望其他人能准确回答你的问题

这是一个例子

主页：

export default class Home extends Component {
    render() {  
        return (
            <View style={{ flex: 1 }}>

                <Header showBorder={true}/>

                <ScrollView>
                   ...
                </ScrollView>
            </View>
        );
    }
}

导出默认类主扩展组件{
render（）{
返回(
...
);
}
}

标题组件：

export default class Header extends React.PureComponent {

  renderTitle = () => {
    if (this.props.title) {
      return (
        <View style={{ flexDirection: 'column', flex: 3, justifyContent: 'center' }}>
          <View style={{ alignSelf: 'flex-start' }}>
            <Text style={[styles.fontBold, { fontSize:17, color: colors.borderWidthColor }]}>{this.props.title}</Text>
          </View>
        </View>
      )
    }
  }

  renderBack = () => {
    if (this.props.back) {
      return (
        <View style={{ marginTop:3 }}>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.goBack()
            }}
            style={{ alignSelf: 'flex-start' }}>
            <Icon name="md-arrow-back" size={23} color="black" />
          </TouchableOpacity>
        </View>
      )
    }
  }


  render() {
    return (
      <View style={[{ height: 70, backgroundColor: this.props.backgroundColor, width: win.width, borderBottomWidth: this.props.showBorder ? 1 : 0 }]}>
        <View style={{ flex: 1, flexDirection: 'row', marginTop: Platform.OS == 'ios' ? 17 : 3 }}>
          <View style={{ flexDirection: 'column', flex: 1, justifyContent: 'center', marginLeft: 12 }}>
            {this.renderBack()}
            {this.renderTitle()}
          </View>
        </View>
      </View>
    )
  }
}

导出默认类标题扩展React.PureComponent{
渲染=（）=>{
如果（本道具标题）{
返回(
{this.props.title}
)
}
}
renderBack=（）=>{
如果（本.道具.背面）{
返回(
{
this.props.navigation.goBack（）
}}
style={{alignSelf:'flex start'}}>
)
}
}
render（）{
返回(
{this.renderBack（）}
{this.renderTitle（）}
)
}
}

您应该为

类别屏幕

和

产品屏幕

您可以在

类别屏幕

和

产品屏幕

导航选项上设置标题

这就是我的意思

//将抽屉中的屏幕包装到StackNavigator中
const CategoryNavigator=createStackNavigator({
类别列表：{
屏幕：类别屏幕，
导航选项：{
标题：“类别”，
header://此处的任何自定义头
}
},
});
const drawerScreens=createDrawerNavigator({
类别：CategoryNavigator，
产品：ProductNavigator，
}, {
initialRouteName:“类别”
})
导出默认AppStack=createStackNavigator({
出票人：{
屏幕：抽屉屏幕，
},
购物车：{
屏幕：CartScreen
}
}, {
initialRouteName:“抽屉”，
});我大部分时间都在使用它，但我不知道在哪里放置标题组件，以及在哪个导航器中，这样它就可以和我投的票重叠了。不确定是否100%正确，但这是正确的方法。根据我的经验，大多数这类问题都可以通过确保包装正确来解决。在抽屉中的选项卡中堆叠，如果不起作用，请在抽屉中的堆栈中堆叠选项卡，并继续尝试，直到正确为止：）这可以正常工作，但我的导航
params
在导航到抽屉堆栈时传入不起作用。