android - TouchableOpacity 组件设置为 position absolute not clickable in android

Question

我使用 React Native 的 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',
  },

按下 TouchOpacity 组件时不会触发 onpress 函数。此问题仅存在于android中，不存在于IOS中。

编辑 1:有一个使用 react-native-svg-charts 创建的区域图表，它被提到的下拉列表重叠。但是，在检查 onPress 不起作用的原因是否可能是由于 zIndex 问题时，我注意到提到的下拉列表是最上面的组件。

图表的代码如下。

我正在使用 react-native-svg-charts

<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%。