Компонент TouchOpacity, установленный в положение абсолютно не кликабелен в Android - PullRequest
Новая
       22

Компонент TouchOpacity, установленный в положение абсолютно не кликабелен в Android

2 голосов
/ 07 июня 2019

Я создал пользовательский выпадающий список, используя компонент 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 не активирует функцию нажатия. Эта проблема существует только в Android, а не IOS.

Редактировать 1: Существует диаграмма, созданная с использованием response-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,
  },

1 Ответ

0 голосов
/ 07 июня 2019

Когда я тестирую это как изолированный и единственный компонент на экране, кажется, что все работает должным образом на Android (Samsung Galaxy Tab 2). Попробуйте изолировать этот компонент и посмотреть, будет ли он работать на Android, возможно, другие компоненты повлияют на него. Также вы можете попытаться проверить, имеет ли компонент контейнера (с dropDownStyle) некоторую высоту, или попытаться установить 100%.

...