不能按下组件外绝对位置的图标

Question

我的应用程序有一个选项卡栏，其中一个图标应该有一个部分覆盖顶部屏幕。但是在选项卡上存在的图标的那部分可以单击，而另一个组件上的图标不能单击。我该如何解决这个问题？

图像

标签条形码：

  <View style={{ backgroundColor: "#2d3238", flexDirection: "row", justifyContent: 'space-around', alignItems: 'center' }}>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Settings')}>
      <View style={{ padding: 5 }}>
        <AntDesign
          style={{ color: '#7d858e', marginVertical: 5 }}
          name="eyeo"
          size={30}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('T')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 35 }}
          name="group"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Map')}>
      <View style={{ position: 'absolute', left: (Dimensions.get('window').width / 2) - 40, top: -25, zIndex: 1 }}>
        <Image
          style={{ height: 80, width: 80 }}
          source={require('../../assets/center.png')}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Q')}>
      <View style={{ padding: 5 }}>
        <Entypo
          style={{ color: '#7d858e', marginLeft: 30, marginRight: 5 }}
          name="chat"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Home')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 5 }}
          name="wifi"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
  </View>

我以这种方式解决了它（忽略混乱），不同之处在于现在按钮属于整个屏幕，而不仅仅是选项卡栏：

 <React.Fragment>
  <View style={{ backgroundColor: "#2d3238", flexDirection: "row", justifyContent: 'space-around', alignItems: 'center' }}>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Settings')}>
      <View style={{ padding: 5 }}>
        <AntDesign
          style={{ color: '#7d858e', marginVertical: 5 }}
          name="eyeo"
          size={30}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('T')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 35 }}
          name="group"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Q')}>
      <View style={{ padding: 5 }}>
        <Entypo
          style={{ color: '#7d858e', marginLeft: 30, marginRight: 5 }}
          name="chat"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Home')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 5 }}
          name="wifi"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
  </View>
  <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Map')}>
      <View style={{}} style={{ position: 'absolute', left: (Dimensions.get('window').width / 2) - 35, top: 608, zIndex: 1 }}>
        <Image
          style={{ height: 80, width: 80 }}
          source={require('../../assets/center.png')}
        />
      </View>
    </TouchableWithoutFeedback>
  </React.Fragment>

Answer 1

由于绝对定位按钮是Android已知的反应原生问题，因此最好的猜测是创建一个解决方法。将选项卡栏重构为包括按钮在内的高度，并使上半部分的背景透明。我现在没有时间创建一个组件并对其进行测试，但我可以稍后再试。