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

Question

我有一个奇怪的情况，zIndex: 5 的按钮位于 Interactable.View 之上zIndex:19。

编辑:它只出现在顶部。它是可见的。但不是(因为缺少更好的术语)可点击。

下面是代码。我在代码中用 //********************************* 标记了按钮和 interactable.view ****************************************//

ma​​p.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
  }
})

样式.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。因此，要么向您的 Interactable.View 添加更高的 elevation，要么在按钮中删除它/更改它的层次结构。