OnPress встроенной карты Flatlist React не запускается на Android

Я использую Expo для своего приложения. У меня есть горизонтальный плоский список, в котором я отображаю свои данные react native paper's Card. Я видел, что у карты есть функция onPress. Я использовал это для перехода на другую страницу. Но функция onPress не запускается на устройстве Android. Я знаю, что сенсорная непрозрачность React native имеет проблему с позиционированием на Android. Я попробовал hitSlop и встроенный стиль zIndex, но все равно не работает. Я также оборачиваю свою карту с react-native's touchable-opacity и игра с позиционированием мне все равно не помогла, только это работает, когда я использовал react-native-gesture-handler's touchable-opacity, но тогда это не работает на IOS. Надеюсь, кто-нибудь может мне помочь...


import React from 'react';
import { Card } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';

interface Iprops {
  item: string;
}

export default function RenderCard({ item }: Iprops) {
  const navigation = useNavigation();
  return (
    <Card
      hitSlop={{ "bottom": 30, "top": 30, "right": 30, "left": 30 }}
      onPress={() => {
        navigation.navigate(`detail`, { // THIS DOES NOT TRIGGER ON ANDROID 
          "id": `${item.pk}`
        });
      }}
      style={{ "marginBottom": 20 }}>
      <Card.Cover
        source={{ "uri": `${item.img_url}` }} />
      <Card.Actions>
        <Card.Title title={item.name} subtitle="Card Subtitle" />
      </Card.Actions>
    </Card>
  );
}

react-native android react-native-flatlist touchableopacity
person Krisna    schedule 22.03.2021    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Как вы сказали, вы должны добавить сенсорную непрозрачность к элементу, который вы визуализируете на карте. TouchableOpacity может быть сложным. Итак, сначала присвойте ему стиль borderWidth:1 и borderColor, чтобы увидеть реальную сенсорную область на экране. Затем вы начинаете сводить их вместе со значком, изображением или чем-то еще, что вы визуализируете. TouchableOpacity работает, но позиционирование может быть сложным. Вы должны понять это, чтобы использовать его лучше. Думайте о touchableOpacity как о представлении с границами, тогда его будет легче понять. Кроме того, если вы не зададите touchableOpacity абсолютную позицию в стиле, он будет где-то вне экрана, я никогда не смогу перенести его куда-нибудь, чтобы я мог видеть, чтобы расположить его. Таким образом, вы также можете добавить 'position'.

person afyonkes    schedule 22.03.2021
comment
Позиция: absolute не может быть моим вариантом, тогда это испортит все мое приложение UI. - person Krisna; 22.03.2021
comment
@Krisna использует модуль Dimensions из react-native, чтобы получить ширину и высоту устройств. Так что вы можете динамически использовать эти значения для позиционирования этих исключительных элементов. - person afyonkes; 22.03.2021
comment
какой стиль я должен использовать Ширина и высота размеров - person Krisna; 22.03.2021
comment
@Krisna, вы можете использовать модуль «Размеры», чтобы получить ширину и высоту и настроить сенсорные области в соответствии с этими переменными высоты и ширины, используя их в своем позиционировании css. - person afyonkes; 23.03.2021

arrow_upward
0
arrow_downward

Я отказался от позиционирования и визуализировал свой компонент на основе платформы.

Platform.OS === `ios` ?
    <Card
      onPress={() => {
        navigation.navigate(`detail`, {
          "id": `${item.pk}`
        });
      }}
      style={{ "marginBottom": 20 }}>
      <Card.Cover source={{ "uri": `${item.img_url}` }} />
      <Card.Actions>
        <Card.Title title={item.name} subtitle="Card Subtitle" right={Beer} />
      </Card.Actions>
    </Card> :
    <TouchableOpacity
      onPress={() => {
        navigation.navigate(`detail`, {
          "id": `${item.pk}`
        });
      }}
    >
      <Card style={{ "marginBottom": 20 }}>
        <Card.Cover source={{ "uri": `${item.img_url}` }} />
        <Card.Actions>
          <Card.Title title={item.name} subtitle="Card Subtitle" right={Beer} />
        </Card.Actions>
      </Card>
    </TouchableOpacity>;

person Krisna    schedule 22.03.2021

arrow_upward
0
arrow_downward

Я заметил, что использование onPressIn или onPressOut работает на Android в плоском списке с абсолютным позиционированием, но onPress не работает. Я надеюсь, что это может помочь кому-то, кто ищет ответ.

Вам нужно будет использовать элемент TouchableOpacity из обработчика react-native-gesture-handler.

person jobman212    schedule 26.05.2021