反應原生觸摸事件正在通過絕對視圖

Question

我正在使用 react-navigation 並且我想在工具欄中按下圖標時顯示一個視圖，我已經使用另一個組件制作了它並將組件設置為絕對顯示，問題是，所有 touchEvents 都是通過疊加視圖，我嘗試在 headerRightStyle 上設置 zIndex 和高程，即使在另一個子視圖中也是絕對視圖。 我還嘗試使用 TouchableWithoutFeedback 作為包裝器，但這也沒有解決問題。

這是我的組件

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>
      ),
    }),
  },
);

Answer 1

添加pointerEvents屬性。 該文件可以在這里找到http://facebook.github.io/react-native/docs/0.50/view#pointerevents添加pointerEvents這一觀點在renderFilterList方法

<View
  style={[
    movieFilterListContainerStyle,
    {
      width: filterListWidth,
    },
  ]}
  pointerEvents={'box-only'}
>

Answer 2

結果證明這是我們應用程序的問題/修復（請參閱第一個和最后一個評論）：將絕對元素移動到頂視圖中的最后一個元素

Android 上的 zIndex / Touch 問題

Answer 3

當用空的TouchableWithoutFeedback包裝時，點擊事件不能傳播到此之外

import { TouchableWithoutFeedback } from "react-native";

<TouchableWithoutFeedback>
  // your component
</TouchableWithoutFeedback>