Возможно ли сделать контейнер с помощью flex-wrap, чтобы все свободные

Question

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

Возможно ли сделать контейнер с помощью flex-wrap, чтобы все свободные

места занимались элементами, не зависимо от порядка?
Чтобы пустое место из видео заполнялось следующим элементом из массива

пока кроме супер сложных алгоритмов в голову ничего не приходит

#mobile #programming #reactnative #russian

0

03.12.2021

12 ответов

11 просмотров

Kyrylo Spork Автор вопроса

Artem👨‍💻 Kazaryan
делаешь chunk(array) получаешь что то типа [[1,2],...

спасибо, попробую

0

03.12.2021

Pav Huk

Artem👨‍💻 Kazaryan
делаешь chunk(array) получаешь что то типа [[1,2],...

а как потом такое анимировать?

0

03.12.2021

Artem👨‍💻 Kazaryan

Pav Huk
а как потом такое анимировать?

а в чем вообще суть анимации ? по видео я не очень понял можно использовать layer animations из reanimated v2

0

03.12.2021

Kyrylo Spork Автор вопроса

Artem👨‍💻 Kazaryan
делаешь chunk(array) получаешь что то типа [[1,2],...

получилось неочень)

0

03.12.2021

Gena Black

Kyrylo Spork
получилось неочень)

Я так и не понял, что вы хотите сделать. Чтоб при увеличении размера элемента список переупорядочивался?

0

03.12.2021

Serhii

Kyrylo Spork
получилось неочень)

https://github.com/AppAndFlow/react-native-masonry-list/blob/master/src/MasonryList.js

0

03.12.2021

Gena Black

Kyrylo Spork
получилось неочень)

В общем, если вы хотели это, то делается просто... переупорядочиваете айтемы так, чтоб они заполняли без дырок пространство и всё... для этого разные алгоритмы подходят, поищите 😉 А анимация через LayoutAnimation

0

03.12.2021

Kyrylo Spork Автор вопроса

Gena Black
В общем, если вы хотели это, то делается просто......

Извиняюсь, но у меня совсем не получается нагуглить reorder to fill empty space rearrange flex items и другие вариации не дают совсем никаких результатов, только нашел классную картинку описыващую проблему) а свой алгоритм упирается в кучу исключений не подскажите как правильно сформировать запрос?

0

04.12.2021

Gena Black

Kyrylo Spork
Извиняюсь, но у меня совсем не получается нагуглит...

Да никак он не формулируется, это класс алгоритмов, т.е. задач, по заполнению пространства без дырок. Только надо доформулировать, потому что иначе есть тривиальное решение - просто отсортировать сперва все длинные, а потом короткие ) Так что дополнительное ограничение - минимально отклониться от изначального порядка. Я у себя использовал "минимально" в смысле "минимум элементов вытащенных из нормального порядка". Ща кину в гитхаб вчерашний пример

0

04.12.2021

Gena Black

Kyrylo Spork
Извиняюсь, но у меня совсем не получается нагуглит...

https://github.com/vovkasm/RnLiveListDemo/blob/master/App.tsx#L29-L58 вот весь алгоритм, немного длинно, но зато прямо ровно как я бы на бумаге их раскладывал

0

04.12.2021

Kyrylo Spork Автор вопроса

Gena Black
https://github.com/vovkasm/RnLiveListDemo/blob/mas...

оу, спасибо, супер

0

04.12.2021

Artem👨‍💻 Kazaryan · Accepted Answer

Artem👨‍💻 Kazaryan

делаешь chunk(array) получаешь что то типа [[1,2],[3,4],[5]] и рендеришь каждую строчку и даешь элементам строки flex:1

0

03.12.2021

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

Возможно ли сделать контейнер с помощью flex-wrap, чтобы все свободные

12 ответов

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