触摸不透明度组件设置为在安卓中绝对不可点击的位置

Question

我使用反应原生的TouchOpacity组件创建了一个自定义下拉列表，如下所示。

 <View style={dropDownStyle}>
    <TouchableOpacity onPress={() => _switchTimeSpan('Day')}>
       <Text style={dropDownItemStyle}>Day</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => _switchTimeSpan('Week')}>
       <Text style={dropDownItemStyle}>Week</Text>
    </TouchableOpacity>
 </View>

样式如下。

  dropDownStyle: {
    position: 'absolute',
    marginTop: 20,
    width: 80,
  },
  dropDownItemStyle: {
    marginTop: 5,
    flex: 1,
    textAlign: 'right',
  },

按下时，触摸不透明度组件不会触发 onpress 功能。此问题仅存在于安卓中，而不适用于 IOS。

编辑 1 ：有一个使用 react-native-svg-charts 创建的面积图，它与上述下拉列表重叠。但是，在检查onPress无法正常工作的原因是否可能是由于zIndex问题时，我注意到提到的下拉列表是最顶层的组件。

图表的代码如下。

我正在使用反应原生 svg 图表

<View style={containerStyle}>
      <YAxis
        data={data}
        style={yAxisStyle}
        formatLabel={value => yAxisFormat(value)}
        contentInset={verticalContentInset}
        numberOfTicks={5}
        svg={axesSvg}
      />
      <View style={chartWrapperStyle}>
        <AreaChart
          style={chartStyle}
          data={data}
          contentInset={verticalContentInset}
          curve={shape.curveCatmullRom}
          svg={{ fill: '#FF4D4D' }}
          animate
        />
        <View style={xAxisStyle}>
          {
            timeSpan !== 'Month' && (
              <XAxis
                data={data}
                // formatLabel={(value, index) => months[value]}
                formatLabel={(value, index) => xAxisPoints[index]}
                contentInset={{ left: 10, right: 10 }}
                // numberOfTicks={5}
                svg={axesSvg}
              />
            )
          }
        </View>
      </View>
    </View>

图表的样式如下。

  containerStyle: {
    height: 200,
    paddingLeft: 20,
    paddingRight: 20,
    flexDirection: 'row',
  },
  yAxisStyle: {
    // marginBottom: 20,
    position: 'absolute',
    height: 180,
    left: 20,
    zIndex: 2,
  },
  chartStyle: {
    flex: 1,
  },
  chartWrapperStyle: {
    flex: 1,
  },
  xAxisStyle: {
    marginHorizontal: -5,
    height: 20,
  },

Answer 1

当我将其作为屏幕上的孤立且唯一的组件进行测试时，一切似乎都可以在Android(三星Galaxy Tab 2(上正常工作。尝试隔离此组件，看看它是否适合您在Android上，也许其他组件会影响它。您也可以尝试检查容器组件(使用 dropDownStyle(是否有一定的高度或尝试设置 100%。