React 本机 Touch 事件正在通过绝对视图传递

Question

我正在使用反应导航，我有一个视图，我想在工具栏中按下图标时显示它，我已经使用另一个组件制作了它并将组件设置为显示为绝对，问题是，所有 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 在方法中添加pointerEventsrenderFilterList此视图

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

Answer 2

事实证明，这是我们应用程序的问题/修复程序(请参阅第一条和最后一条评论(： 将绝对元素移动到顶视图中的最后一个元素

z索引/触摸问题在安卓上

Answer 3

当用空TouchableWithoutFeedback包装时，单击事件无法传播到超出该范围

import { TouchableWithoutFeedback } from "react-native";
<TouchableWithoutFeedback>
// your component
</TouchableWithoutFeedback>