Дайте пожалуйста совет Есть такая карточка, её нужно сделать адаптивной по

Question

React Native — русскоговорящее сообщество

Дайте пожалуйста совет Есть такая карточка, её нужно сделать адаптивной по

ширине и высоте, она может быть заполнена контентом и тд, внутри как видите есть картинка, но картинку сохранить такой формы и растягивать постоянно по ширине и высоте не вариант совсем, форма будет искажаться
Есть подобные карточки но без картинок а просто SVG, их я сделал просто как квадраты и сверху SVG круг, как шапку, выглядит монолитно и всё хорошо
С картинкой такого не получается
Наложить картинку поверх тех карточек и задать общему их контейнеру overflow: hidden тоже не прокатит, т.к. весь блок учитывается как квадрат, не смотря на его интересную форму

Какие можете дать советы, как решить задачу?

#mobile #programming #reactnative #russian

0

25.08.2021

4 ответов

11 просмотров

whyamsx Автор вопроса

Gena Black
Я не знаю эту ли задачу вы пытаетесь решить, но мн...

Да, в этом есть доля того, что нужно Здесь ненужная часть картинки спрятана с помощью overflow: "hidden", но это уместно благодаря квадратной форме View, у меня же она должна быть изогнутой, в виде дуги, это возможно только с использованием SVG, которая тоже будет считаться квадратом, не смотря на её произвольную форму и в таком случае не получится достигнуть нужного результата Допустим: нужно отобразить картинку только в пределах границ SVG какой-нибудь сложной геометрической фигуры, где нет симметрии и прочих идеальных условий и она ни в коем случае не квадратная и не круглая а например в виде иконки паровоза или что-то такое.. Нужно сделать так, чтобы эта фигура была как маска для картинки, которая и будет видна только внутри такой фигуры, чтобы был тот же эффект как и с overflow: "hidden", но края скрывались не относительно квадратного блока фигуры, а относительно контура самой фигуры Надеюсь получилось объяснить то что нужно!!

0

25.08.2021

Gena Black

whyamsx
Да, в этом есть доля того, что нужно Здесь ненужн...

Короче, если нужны дуги, то есть ещё несколько "хаков", но они очень специфичные... типа можно попробовать вешать над карточкой слой с цветом фона в местах, которые надо затенять, и прозрачным цветом в местах, где должен быть виден контент... Но это всё хаки, если подойдут, то так и надо делать. Что же касается метода без хаков, то это нужна "маска", а с этим сложно в RN, есть вот такое: https://github.com/react-native-masked-view/masked-view - но надо экспериментировать, возможны проблемы с производительностью.

0

25.08.2021

whyamsx Автор вопроса

Gena Black
Короче, если нужны дуги, то есть ещё несколько "ха...

Ого, а вот это прям то что нужно Спасибо огромное

0

25.08.2021

Gena Black · Accepted Answer

Gena Black

Я не знаю эту ли задачу вы пытаетесь решить, но мне стала интересна именно такая: https://snack.expo.dev/@vovkasm/book-effect-sample

0

25.08.2021

169 похожих чатов

Дайте пожалуйста совет Есть такая карточка, её нужно сделать адаптивной по

4 ответов

Похожие вопросы