React Native - 具有较低 zIndex 的按钮出现在具有较高 zIndex 的视图顶部 [英] React Native - Button with lower zIndex appears on top of view with higher zIndex
本文介绍了React Native - 具有较低 zIndex 的按钮出现在具有较高 zIndex 的视图顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个奇怪的情况，一个带有 zIndex: 5 的按钮位于 zIndex: 19 的noreferrer">Interactable.View.
I have a curious situation where a button with zIndex: 5 sits on top of an Interactable.View of zIndex: 19.
它似乎只在顶部.它是可见的.但不是(因为没有更好的术语)可点击.
下面是代码.我在代码中用 //******************************* 标记了按钮和interactable.view****************************************//
Below is the code. I have marked the button and the interactable.view in the code with //********************************************************************//
map.js
import {
StyleSheet,
View,
Text,
FlatList,
TouchableHighlight,
Dimensions,
Platform,
//findNodeHandle,
Image
} from 'react-native'
import React, { Component } from 'react'
import MapView from 'react-native-maps'
import { connect } from 'react-redux'
import {
Button,
Container
} from 'native-base'
import { updateRegion } from './map.action'
import Icon from 'react-native-vector-icons/FontAwesome'
import { toggleMenu } from '../search-page/searchPage.action'
import mapStyle from './style'
import Interactable from 'react-native-interactable'
import { setSelectedShop } from '../search-results/searchResults.action'
import { updateHeight } from '../search-results/searchResultsPresenter.action'
import { getSelectedProduct } from './markers.selector'
import { updateSearchResults } from '../search-page/searchPage.action'
//import { BlurView } from 'react-native-blur'
const Screen = {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}
const mapStateToProps = (state) => ({
region: state.get('map').get('region'),
markers: state.get('searchResults').get('products'),
selectedProduct: getSelectedProduct(state)
})
const mapDispatchToProps = (dispatch) => ({
onRegionChange: (region) => {
dispatch(updateRegion(region))
},
updateSearchResults: (results) => {
dispatch(updateSearchResults(results))
},
onToggleMenuClick: () => {
dispatch(toggleMenu())
},
setSelectedShop: id => {
dispatch(setSelectedShop(id))
},
updateHeight: height => {
dispatch(updateHeight(height))
}
})
class Map extends Component {
constructor(props) {
super(props)
//this.state = { viewRef: null }
}
componentDidMount() {
const { store } = this.context
this.unsubscribe = store.subscribe(() => { })
//this.setState({ viewRef: findNodeHandle(this.viewToBlur) })
}
componentWillUnmount() {
this.unsubscribe()
}
interactableView;
interactableView2;
render() {
return (
<Container>
<MapView
style={styles.map}
region={this.props.region}
onRegionChangeComplete={this.props.onRegionChange}>
{
this.props.markers.map(marker => {
return (
<MapView.Marker
coordinate={marker.shop.coordinate}
title={marker.shop.name}
identifier={marker.shop.id.toString()}
onPress={e => {
console.log(e.nativeEvent)
this.interactableView.snapTo({ index: 1 })
this.props.setSelectedShop(marker.shop)
console.log(this.props.selectedProduct)
}}
/>
)
})
}
</MapView>
//********************************************************************//
the button
//********************************************************************//
<Button
small
icon
style={mapStyle.toggleMenuButton}
onPress={() => {
this.interactableView.snapTo({ index: 0 })
this.props.onToggleMenuClick()
this.props.setSelectedShop({ id: -1 })
this.props.updateSearchResults({ products: [] })
}}>
<Icon name="sliders" size={20} color="#FFFFFF" />
</Button>
//********************************************************************//
the interactable.view
//********************************************************************//
<Interactable.View
style={{
height: Screen.height,
width: '100%',
zIndex: 19,
backgroundColor: '#222222',
position: 'absolute',
borderRadius: 10,
padding: 20
}}
boundaries={{ top: 0, bounce: 0.5 }}
verticalOnly={true}
snapPoints={[
{ y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85, damping: 0.7 },
{ y: (Platform.OS === 'ios') ? Screen.height - 190 : Screen.height - 230, damping: 0.7 },
{ y: 0, damping: 0.7 }
]}
initialPosition={{ x: 0, y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85 }}
ref={view => this.interactableView2 = view}>
</Interactable.View>
<Interactable.View
style={{
height: Screen.height,
width: '100%',
zIndex: 20,
backgroundColor: '#222222',
borderRadius: 10,
padding: 20
}}
boundaries={{ top: 0, bounce: 0.5 }}
verticalOnly={true}
snapPoints={[{ y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85, damping: 0.7 },
{ y: (Platform.OS === 'ios') ? Screen.height - 190 : Screen.height - 230, damping: 0.7 }]}
initialPosition={{ x: 0, y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85 }}
ref={view => this.interactableView = view}>
<View
style={{ width: '100%', height: 200 }}>
<Text
style={{
color: 'white',
marginTop: (Platform.OS === 'ios') ? 0 : 2,
marginBottom: (Platform.OS === 'ios') ? 20 : 25,
textAlign: 'center',
width: '100%'
}}>
{this.props.selectedProduct ? this.props.selectedProduct.shop.name : ''}
</Text>
{this.props.selectedProduct ? (
<FlatList
horizontal={true}
style={{
height: 200
}}
data={this.props.selectedProduct ? this.props.selectedProduct.products : [{ name: '' }]}
renderItem={({ item }) => {
return (
<TouchableHighlight onPress={() => this.interactableView2.snapTo({ index: 2 })}>
<View
//ref={x => this.viewToBlur = x}
style={{ width: 100, marginRight: 20 }}>
{/*<View style={{
borderWidth: 1,
borderColor: 'black',
margin: 0,
backgroundColor: 'red'
}} />*/}
{item.image ? (
<Image
style={{
width: 100,
height: 100,
zIndex: 45
}}
source={{ uri: item.image }}
/>) : (
<Image
style={{
width: 100,
height: 100,
zIndex: 45
}}
source={ require('../add-page/noimage.png') }
/>
)}
<Text style={{
color: 'white',
width: '100%',
textAlign: 'center'
}}>{item.name}</Text>
</View>
</TouchableHighlight>
)
}} />) : <View />}
</View>
{/*<BlurView
style={{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
borderWidth: 1,
borderColor: 'black',
zIndex: 60
}}
blurType="dark"
viewRef={this.state.viewRef}
blurAmount={20}
blurRadius={20} />*/}
</Interactable.View>
</Container >
)
}
}
Map.contextTypes = {
store: React.PropTypes.object
}
Map.propTypes = {
region: React.PropTypes.shape({
latitude: React.PropTypes.number,
longitude: React.PropTypes.number,
latitudeDelta: React.PropTypes.number,
longitudeDelta: React.PropTypes.number
}).isRequired,
updateHeight: React.PropTypes.func,
setSelectedShop: React.PropTypes.func,
selectedProduct: React.PropTypes.object,
onRegionChange: React.PropTypes.func.isRequired,
onToggleMenuClick: React.PropTypes.func.isRequired,
markers: React.PropTypes.array,
updateSearchResults: React.PropTypes.func
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Map)
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
zIndex: 3
}
})
style.js
export default {
toggleMenuButton: {
top: 30,
left: 10,
width: 50,
position: 'absolute',
zIndex: 5,
height: 50,
elevation: 20,
borderRadius: 25,
backgroundColor: '#FF3B3F',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 1
},
shadowRadius: 1,
shadowOpacity: 1.0
}
}
为什么 zIndex 没有正确排序它们?如何让interactable.view 覆盖按钮?
Why is the zIndex not ordering them correctly? How do I get the interactable.view to cover the button?
该错误仅发生在 Android 上
推荐答案
这是因为您在按钮上设置了 elevation.当使用 elevation 时，Android 会覆盖 zIndex.因此，要么向您的 Interactable.View 添加更高的 elevation，要么删除它/更改它在按钮中的层次结构.
It's because you have elevation set on your button. Android overrides the zIndex when elevation is used. So either add a higher elevation to your Interactable.View or remove it/change it's hierarchy in the button.
这篇关于React Native - 具有较低 zIndex 的按钮出现在具有较高 zIndex 的视图顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
