Как сделать гибкую ширину 2d FlatList в реагирующем

Question

Я использую реагировать родной 0,57.Я хочу сделать 2D Grid для блоков с фиксированной шириной и фиксированной высотой, используя Flatlist.Что-то вроде сетки показа можно свободно регулировать количество столбцов в соответствии с размером экрана.Я не могу это реализовать.

Я могу использовать фиксированный столбец, но я хочу, чтобы моя сетка настраивалась в зависимости от ширины устройства.Ширина поля может быть непредсказуемой в зависимости от текста между ними.Заранее спасибо

Пример: в gmail:

Answer 1

Вы можете использовать свойство flex и ширину null.

при условии, что у вас есть функция renderitem и максимум 4 столбца, вам понадобится несколько "фиктивных элементов" в ваших данных плоского списка

<FlatList
          style={{flex:1}}
          data={[1,2,3,4,dummy,dummy,3,4,1,2,dummy,dummy]}
          renderItem={this.renderItem}
          numColumns={4} 
        />

    renderItem = ({ item, index }) => {
      if(item==='dummy'){return <View/>}
        return (
          <View style={{height:100,width:null,flex:1,backgroundcolor:'red'}}/>
        );
      };

используйте flex 1, чтобы заполнить "фиктивный"пробел или изгиб 1/2, чтобы заполнить половину экрана и т. д.