#android #react-native #grid #horizontal-scrolling #vertical-scrolling
#Android #реагировать-родной #сетка #горизонтальная прокрутка #вертикальная прокрутка
Вопрос:
Я пытаюсь настроить макет таблицы в react native, который можно было бы прокручивать по горизонтали и вертикали.
Под макетом таблицы сетки я подразумеваю макет, аналогичный html table / tr / td: все представления в одной строке должны иметь одинаковую высоту, а все представления в одном столбце должны иметь одинаковую ширину.
Высота строки должна быть выбрана на основе высоты самого большого вида в строке. Ширина столбца должна быть выбрана на основе ширины самого большого вида в столбце.
Я начал с горизонтальной прокрутки. Вот что я сделал: https://snack.expo.io/@grekonstudio/01_initial В то время как для меня это выглядит нормально в браузере, на моем устройстве это выглядит так:
Самый большой столбец занимает столько места, сколько ему нужно, а остальное пространство распределяется между другими столбцами. Но это делается для каждой строки независимо, поэтому границы столбцов плавают. В идеале я хочу, чтобы строка 1, Col 1 и строка 2, Col 1 были того же размера, что и строка 3, Col 1. Это не работает так, как они, и в разных строках.
Ну, очевидная идея состоит в том, чтобы переключиться на базовую компоновку столбцов, верно: https://snack.expo.io/@grekonstudio/04_column_based Опять же, в браузере это выглядит по-другому. На устройстве это выглядит так:
На первый взгляд, это именно то, чего я хочу! Но, по-видимому, это просто переводит проблему в другое измерение. Давайте сделаем один вид выше других, добавим вертикальный вид прокрутки, и теперь мы теряем расположение строк: https://snack.expo.io/@grekonstudio/05_same_problem
Вы можете видеть, что большая ячейка занимает все пространство, а строки больше не имеют одинакового размера: (
Кроме того, я попробовал еще две вещи:
- установка flex: 1 для просмотра contentContainerStyle прокрутки. https://snack.expo.io/@grekonstudio/02_flex_1 В этом случае он вообще не прокручивается.
Получение высоты и ширины устройства и фиксация размера прокрутки contentContainerStyle https://snack.expo.io/@grekonstudio/03_fixed_width В этом случае ‘flex: 1’ работает так же, как и без просмотра прокрутки: разбивая его на блоки одинакового размера, в то время как я хочу, чтобы строки и столбцы корректировались по содержимому. Другим недостатком является жесткое кодирование width: 2 * screenWigth какнапример, для небольшого контента мне может не понадобиться ширина экрана 2, мне может понадобиться только 1.5 или 1.2. Это также не будет работать в портретном режиме.
Я также пытался использовать компонент DataTable https://callstack.github.io/react-native-paper/data-table.html , но при добавлении в режим горизонтальной прокрутки он не сохраняет макет таблицы таким же, как на моем первом изображении: ячейки в одном столбце имеют разную ширину.
У кого-нибудь есть решение для вышеупомянутого?