我正在使用react-navigation,并且有一个视图要在工具栏中按下图标时显示,我已经使用另一个组件进行了设置,并将该组件设置为绝对显示,事实是,所有touchEvents都是通过覆盖视图,我尝试在两个headerRightStyle(绝对视图)上设置zIndex和height,即使在另一个子视图中也是如此。我还尝试使用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>
),
}),
},
);
添加pointerEvents
属性。该文档可以在这里找到http://facebook.github.io/react-native/docs/0.50/view#pointerevents将方法添加pointerEvents
到此视图renderFilterList
<View
style={[
movieFilterListContainerStyle,
{
width: filterListWidth,
},
]}
pointerEvents={'box-only'}
>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句