Сетка с различными элементами высоты (React Native)

Question

Любая идея реализации сетки, как показано на следующем рисунке.

Answer 1

Ответ зависит от данных, которые вы собираетесь отображать. Я думаю, это бесконечный список, который загружает больше предметов на прокрутку вниз. Если это так, вам нужно положить 3 ListView -s внутри ScrollView

Разметка будет выглядеть следующим образом:

<View style={styles.wrapper}> 
 
    <ScrollView contentContainerStyle={styles.container}> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn1} 
 
     /> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn2} 
 
     /> 
 
     <ListView 
 
      contentContainerStyle={styles.list} 
 
      dataSource={this.state.dataSourceColumn3} 
 
     /> 
 
    </ScrollView> 
 
</View>

Упаковочный View поможет вам растянуть блок, чтобы соответствовать всей площади. С точки зрения стайлинга вы можете решить задачу с Flexbox:

wrapper: { 
 
    flex: 1 
 
}, 
 
container: { 
 
    flexDirection: 'row', 
 
    paddingHorizontal: 5 
 
}, 
 
list: { 
 
    flex: 1, 
 
    flexDirection: 'column', 
 
    paddingVertical: 10, 
 
    paddingHorizontal: 5 
 
}

Хитрость заключается в том, что мы рассматриваем каждый столбец как строку внутри контейнера. Играйте с прокладками и alignItems стилей для достижения согласованного интервала.

Теперь сложная часть - правильно обработать dataSource. Идея состоит в том, чтобы иметь 3 dataSource -s в состоянии компонента. Таким образом, всякий раз, когда данные извлекаются, вам придется перебирать их вручную и делиться на три источника.

Обратите внимание, что удобно onEndReached, который поставляется с ListView не будет доступно здесь, так что вы должны поймать пользователь достигающего конца ScrollView, чтобы знать, когда новые выборки требуются. Но это другой вопрос, который, как мне кажется, уже получил ответ в другом месте.

В случае, если сетка является конечной, и вам не нужно бросать в нее больше предметов, все проще. Просто разделите данные так, как описано выше, и используйте 3 View -s с вложенными элементами вместо ListView-s. Причиной этого является то, что ListView имеет возможность установить условие rowHasChanged, что улучшает производительность, никогда не отображая неизменные элементы списка. Вам действительно не нужно, чтобы список был конечным.