0

我使用 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 功能。这个问题只存在于安卓而不是IOS。

编辑 1：使用 react-native-svg-charts 创建了一个 areachart，它与提到的下拉列表重叠。但是，在检查 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,
  },
4

1 回答 1

0

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

于 2019-06-07T09:32:13.987 回答