Reactnative React native Touch 事件正在通过绝对视图

我使用的是react navigation，我想在工具栏中按下图标时显示一个视图，我已经使用了另一个组件，并将组件设置为绝对显示，问题是，所有touchEvents都通过叠加视图，我try 在两个headerRightStyle上设置zIndex和elevation，绝对的观点，即使是在另一个 children 观点中.

这是我的组件

import React, { Component } from 'react';
import {
  View,
  Text,
  UIManager,
  LayoutAnimation,
  Dimensions,
  TouchableWithoutFeedback,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const styles = {
  movieFilterListContainerStyle: {
    position: 'absolute',
    bottom: -300,
    right: -10,
    height: 300,
  },
};

class MovieFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showFilterList: false,
      filterListWidth: 0,
    };
    this.renderFilterList = this.renderFilterList.bind(this);
    this.onShowFilterList = this.onShowFilterList.bind(this);
    this.calculateFilterListWidth = this.calculateFilterListWidth.bind(this);
  }

  componentWillMount() {
    UIManager.setLayoutAnimationEnabledExperimental(true);
    this.calculateFilterListWidth();
    Dimensions.addEventListener('change', this.calculateFilterListWidth);
  }

  componentWillUpdate() {
    LayoutAnimation.spring();
  }

  componentWillUnmount() {
    Dimensions.removeEventListener('change', () => {});
  }

  onShowFilterList() {
    const { showFilterList } = this.state;
    this.setState({ showFilterList: !showFilterList });
  }

  calculateFilterListWidth() {
    this.setState({ filterListWidth: Dimensions.get('window').width });
  }

  renderFilterList() {
    const { showFilterList, filterListWidth } = this.state;
    const { movieFilterListContainerStyle } = styles;
    if (showFilterList === true) {
      return (
        <View
          style={[
            movieFilterListContainerStyle,
            {
              width: filterListWidth,
            },
          ]}
        >
          <TouchableWithoutFeedback onPress={() => {}}>
            <View
              style={{
                flex: 1,
                backgroundColor: '#FFFFFF',
                elevation: 10,
                zIndex: 999999,
                paddingRight: 10,
                paddingLeft: 10,
                paddingTop: 10,
                paddingBottom: 10,
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  position: 'relative',
                  justifyContent: 'space-between',
                }}
              >
                <Text>Year</Text>
                <Text>Test</Text>
              </View>
              <View style={{ flexDirection: 'row', position: 'relative' }}>
                <Text>Rating</Text>
                <Text>Test</Text>
              </View>
              <View style={{ flexDirection: 'row', position: 'relative' }}>
                <Text>Categories</Text>
                <Text>Test</Text>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </View>
      );
    }
    return null;
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Icon name="filter-list" size={30} onPress={this.onShowFilterList} />
        {this.renderFilterList()}
      </View>
    );
  }
}

export default MovieFilter;

这是我的导航器:

const MoviesTab = createStackNavigator(
  {
    MovieList: MoviesScreen,
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerRight: (
        <View
          style={{
            marginLeft: 10,
            marginRight: 10,
            flexDirection: 'row',
            flex: 1,
          }}
        >
          <Icon
            onPress={navigation.getParam('logout')}
            size={30}
            name="logout-variant"
            color="#000000"
          />
          <MovieFilter />
        </View>
      ),
      headerRightContainerStyle: {
        zIndex: 20,
        elevation: 20,
      },
      headerLeft: (
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <SearchBar />
        </View>
      ),
    }),
  },
);