React Navigation 5标头重叠

我正在React Native中创建一个应用程序，正在使用React Navigation 5.x，并且用我创建的默认标头替换了默认标头，这是代码的一部分：

App.js

    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" drawerContent={SideMenu} drawerStyle={{
    backgroundColor: '#fff',
    width: Dimensions.get('window').width - 120,
  }}>
        <Drawer.Screen name="Home" component={StackNav} />
      </Drawer.Navigator>
    </NavigationContainer>

StackNav.js

    <Stack.Navigator   headerMode="float" screenOptions={{
      cardShadowEnabled: false,
      cardOverlayEnabled:false,
      headerTransparent: true,
      headerBackTitleVisible: false,
      gestureEnabled: true,
      headerTintColor: currentTheme.colors.primary,
      headerTitleStyle: styles.headerTitle,
      gestureDirection:"horizontal",
      headerStyleInterpolator: HeaderStyleInterpolators.forStatic,
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        header: ({ scene, previous, navigation }) => {
        const { options } = scene.descriptor;
        const title =
          options.headerTitle !== undefined
            ? options.headerTitle
            : options.title !== undefined
            ? options.title
            : scene.route.name;

        return (
            <MyHeader click={() => addCart()} ref={myRef} scene={scene} onPress={navigation.goBack} navigation={navigation}/>
        );
      }
      }}>
        <Stack.Screen name="Home" component={Home} options={{title: 'Home'}}/>
        <Stack.Screen name="Menu" component={RestaurantMenu} options={({ route }) => ({ title: route.params.name })}/>
        <Stack.Screen name="Piatti" component={MenuItems} options={({ route }) => ({ title: route.params.name })}/>
        <Stack.Screen name="Carrello" component={Cart} options={({ route }) => ({ title: route.params.name })}/>
      </Stack.Navigator>

MyHeader.js

import * as React from 'react';
import { StyleSheet, Button, SafeAreaView, TouchableOpacity, Image,View, Text } from 'react-native';  



const styles = StyleSheet.create({
    containerSafe: {
        flex: 1,
        flexDirection:"row",
        justifyContent: "space-between"
      },
      containerLeft: {
        zIndex: 1,
        alignSelf: 'flex-start',
        left: 0,
        marginTop:25,
        marginLeft:10,
        width: 25,
        height: 25,
        justifyContent: 'center',
        alignContent: 'center'
      },
      containerCenter: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      },
      containerRight: {
        zIndex: 1,
        alignSelf: 'flex-end',
        right: 0,
        marginTop:25,
        marginRight:10,
        width: 25,
        height: 25,
        justifyContent: 'center',
        alignContent: 'center'
      } 
  });

class CartButton extends React.Component {
    constructor(props) {
        super(props);
    }

    render(){
        return (
            <TouchableOpacity onPress={() => this.props.onPress()}  style={styles.containerRight}>
            <Image style={{width:"100%", height:"100%"}}
                source={require('../assets/cart.png')}
            />
            <Text>{this.props.nCart}</Text>
        </TouchableOpacity>
        )
    }
}

class HomeButton extends React.Component {
    constructor(props) {
        super(props);
    }

    render(){
        return (
            <TouchableOpacity onPress={() => this.props.onPress()} style={styles.containerLeft}>
                <Image style={{width:"100%", height:"100%"}}
                    source={require('../assets/menu.png')}
                />
            </TouchableOpacity>
        )
    }
}

class BackButton extends React.Component {
    constructor(props) {
        super(props);
    }

    render(){
        return (
            <TouchableOpacity onPress={() => this.props.onPress()} style={styles.containerLeft}>
                <Image style={{width:"100%", height:"100%"}}
                    source={require('../assets/leftArrow.png')}
                />
            </TouchableOpacity>
        )
    }
}


  class MyHeader extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            nCart: 0
        }
        this.addCart = this.addCart.bind(this);
    }

    addCart(){
        var current = this.state.nCart;
        this.setState({
            nCart: current +1
        })
    }


    render(){
        return(
            <SafeAreaView style={styles.containerSafe}>
                {(this.props.scene.route.name === "Home")? <HomeButton onPress={() =>this.props.navigation.openDrawer()} /> : <BackButton onPress={() => this.props.navigation.goBack()} />}
                <Button title="click" onPress={(() => this.props.click())} />
                <CartButton nCart={this.state.nCart} onPress={() => this.props.navigation.navigate('Carrello', {name: 'Carrello'})} />
            </SafeAreaView>
        )
    }
}

export default MyHeader;

但这给了我这个问题

当我切换屏幕时，“后退”按钮和“购物车”按钮会重叠，但汉堡菜单应该消失并成为“后退”按钮的箭头，而购物车应该像在家里一样在柜台上简单地更新。