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：有一个areachart使用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％。

TouchOpacity组件设置为在Android

1 个答案: