react-native - 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;

如何在反应导航 5 中制作完全自定义的标题组件？谢谢！

标签： react-nativereact-navigationreact-navigation-v5