плоский список с динамическими столбцами numColumns

Я начал работать с react native 1 месяц назад. Теперь я начинаю создавать простой, который извлекает данные из Интернета и показываю макет, как на изображении ниже.

Как лучше всего поместить эти результаты в таблицу?





введите описание изображения здесь

это мой простой код

 render() {
  <FlatList
      data={newsData}
      renderItem={
        ({item,index}) =>
        index === 0 ? this._renderHighlightedVideo(item.node,index) :
        index === 5 ? this._renderAdvertisment() :
        index > 10 && (index+2) % 7 === 0 ? this._renderAdvertisment() :  this._renderGridVideo(item.node, index)
      }
      keyExtractor={(item, index) => index}
      />
 }




_renderHighlightedVideo(news, index) { }
_renderAdvertisment(){ }
_renderGridVideo(item.node, index){ }

react-native react-native-flatlist react-native-listview
person Seakleng Say    schedule 12.03.2018    source источник

Ответы (1)


arrow_upward
12
arrow_downward

  • Для этого используйте columnWrapperStyle = {{flexWrap: 'wrap'}} inFlatlist, убедитесь, что для numColumns установлено значение больше 1.

  <FlatList
              columnWrapperStyle={{ flexWrap: 'wrap', flex: 1, marginTop: 5 }}
              data={this.state.tags}
              horizontal={false}
              renderItem={({ item, index }) => <Tags item={item} index={index}
                handleSelectedTags={this.handleSelectedTags}
                selected={this.state.selected[index]} />
              }
              numColumns={3}
              keyExtractor={(item, index) => index}
            />

Надеюсь, это поможет.

person Rajat Gupta    schedule 12.03.2018