我有一种奇怪的情况，zIndex: 5的按钮位于zIndex: 19 //********************************************************************//之上。
编辑：它似乎只是在顶部。它是可见的。但不是（缺乏更好的术语）可以适应。
以下是代码。我已使用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
}
})
map.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
}
}
style.js
{{1}}
为什么zIndex没有正确排序？如何让interactable.view覆盖按钮？
编辑：该错误仅发生在Android
上答案 0 :(得分：1)
这是因为您在按钮上设置了elevation。使用zIndex时，Android会覆盖elevation。因此，要么向elevation添加较高的Interactable.View，要么将其删除/更改按钮中的层次结构。