Как сделать SVG-элемент кликабельным в React?

Question

Я использую React Native с Expo, и у меня есть 4 SVG-элемента, которые мне нужны, чтобы они были кликабельными.Вот код для каждого из них:

  <Svg.G
    id="Passangers-Going-B"
    onPress={() => console.log(`${cardinalPoint} Avatar Was Clicked`)}
   >
...

С этим кодом я могу нажать на элемент SVG, но странная вещь в том, что когда я пытаюсь щелкнуть на другом элементе, щелчок все еще вызываетсобытие последнего элемента, на котором я нажал.

Я записал видео с поведением

Итак, есть ли лучший способ сделать это?Все, что мне нужно, это нажать на эти элементы SVG, чтобы перейти на новый маршрут.

Есть идеи?

Я использую SVG с выставки.import { Svg } from 'expo'; -> https://docs.expo.io/versions/latest/sdk/svg/

Я также создал Snack, но не вижу, что он работает вообще -> https://snack.expo.io/@maketroli/expo.svg-example?session_id=snack-session-_9YKofW2Y

То, что я вижу, это то, что если я нажму наодин из элементов щелчка застревает там, потому что, если я щелкаю новый элемент, он выбрасывает функцию последнего нажатого элемента.Мне нужно 3 раза кликнуть новый элемент, чтобы сфокусировать щелчок на этом элементе.

Я видел кое-что о PanResponder , но я не знаю, что это как-то связано с этим.

Answer 1

Вы должны заключить SVG в Компонент, который предназначен только для обработки события Press.

import { TouchableOpacity } from "react-native"

<TouchableOpacity onPress={() => console.log(`${cardinalPoint} Avatar Was Clicked`)}>
    <Svg.G
        id="Passangers-Going-B"
    />
</TouchableOpacity>

Вам нужно будет соответствующим образом оформить его.