React Native - 具有较低zIndex的按钮出现在具有较高zIndex的视图的顶部

Question

我有一个好奇的情况，其中zIndex: 5的按钮位于的zIndex: 19之上。

编辑：它只显示在上面。它是可见的。但不是（因缺乏更好的术语）可点击。

以下是代码。我已标记的按钮，并在代码中interactable.view与//********************************************************************//

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来覆盖按钮？

编辑：错误只发生在Android

Answer 1

这是因为你有你的按钮elevation集。当使用elevation时，Android覆盖zIndex。因此，请将较高的elevation添加到您的Interactable.View或删除它/更改按钮中的层次结构。