Хотите, чтобы реальное изображение было интерактивным, но не следует нажимать альфа-фон. Пожалуйста, подскажите мне, как я могу это сделать

#react-native

#react-native

Вопрос:

я столкнулся с проблемой в react native Хотите, чтобы реальное изображение было интерактивным, но не должно нажимать альфа-фон. Пожалуйста, подскажите мне, как я могу это сделать.

На изображении ниже я использовал zIndex для размещения птиц, красным цветом обозначена альфа-область вышеуказанной птицывведите описание изображения здесь

Комментарии:

1. Может быть, попробовать сделать css polygon похожим на те птицы, которые прозрачны?

2. чего вы действительно хотите, так это сделать красную часть интерактивной, верно?, Я думаю, что обертывание вида с помощью TouchableHighlight может вам помочь, пожалуйста, поделитесь каким-нибудь фрагментом кода

3. хотите щелкнуть по красной части, чтобы пользователь мог щелкнуть птицу назад, все птицы доступны для просмотра. проблема в том, что изображение имеет прямоугольную форму (реальное содержимое и другая часть — альфа). итак, изображение птицы выше (альфа-часть покрывает изображение ниже, теперь пользователь не может щелкнуть под изображением птицы).

Ответ №1:

К сожалению, нет простого способа сделать это с помощью React Native. Лучшее решение, которое я нашел, — это определить SVGS и использовать react-native-svg , который поддерживает события касания. Если вы используете Expo, то оно уже предустановлено и может быть импортировано следующим образом import { Svg } from 'expo'; const { Circle, Rect } = Svg; .

В качестве альтернативы вы можете использовать WebView (зеркальное отображение) и маскировку CSS для достижения желаемого результата.