React Navigation 5标头重叠

Question

我正在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;

但是它给了我这个问题

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

Answer 1

https://reactnavigation.org/docs/en/stack-navigator.html#header

[使用自定义标题时，建议将导航器上的headerMode道具设置为screen，这样就不必实现动画。

如果您希望自定义标题与屏幕过渡保持动画效果，并希望将headerMode保持为float，则可以在scene.progress.current和scene.progress.next道具上进行插值。

Answer 2

我通过添加这段代码解决了它

const progress = Animated.add(scene.progress.current, scene.progress.next || 0);

const opacity = progress.interpolate({
                  inputRange: [0, 1, 2],
                  outputRange: [0, 1, 0],
                });

return (
   <Animated.View style={{ opacity }}><MyHeader click={() => addCart()} ref={myRef} scene={scene} onPress={navigation.goBack} cartElement={cart} navigation={navigation}/></Animated.View>
);