React Navigation 5自定义标头组件

Question

我正在尝试在自v3以来一直使用的React Navigation v5中创建自定义标头，但是某种程度上它在v5中不起作用。我的标题成功显示，并且动画向下滚动，但是我无法单击标题内的任何内容，也无法检查标题。

const Stack = createStackNavigator();

class HomeStack extends Component {
  render() {
    return (
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={Home}
          options={{
            header: (props) => <HomeHeader {...props} />,
          }}
        />
      </Stack.Navigator>
    );
  }
}

这是我的标头组件

/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Animated} from 'react-native';

class HomeHeader extends Component {
  handleClickSearch = () => {
    this.props.navigation.navigate('Search');
  };
  render() {
    const {
      scene: {
        route: {params},
      },
    } = this.props;

    if (!(params && params.opacity && params.bgColor)) return null;
    // console.log(params.bgColor)
    return (
      <Animated.View
        style={{
          ...styles.container,
          backgroundColor: params.bgColor,
          // elevation: params.elevation
        }}>
        <Animated.View
          style={{
            ...styles.searchContainer,
            opacity: params.opacity,
          }}>
          <View
            style={{
              flex: 1,
              height: '100%',
              backgroundColor: '#fff',
              width: '100%',
              borderRadius: 10,
              borderWidth: 1,
              borderColor: '#666666',
            }}>
            <TouchableOpacity
              activeOpacity={1}
              style={styles.search}
              onPress={() => this.handleClickSearch()}>
              <Text style={styles.searchText}>
                Search batik, sepatu kulit...
              </Text>
            </TouchableOpacity>
          </View>
        </Animated.View>
      </Animated.View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 60,
    paddingTop: 10,
    paddingBottom: 5,
    paddingHorizontal: 10,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  searchContainer: {
    width: '90%',
    height: 38,
    justifyContent: 'center',
  },
  search: {
    paddingHorizontal: 10,
    paddingVertical: 5,
    height: '100%',
    justifyContent: 'center',
  },
  searchText: {
    color: '#666666',
    fontSize: 12,
    letterSpacing: 0.5,
    lineHeight: 14,
  },
});

export default HomeHeader;

如何在React Navigation 5中制作完全自定义的标头组件？谢谢！