React Native FlatList зі стовпцями, ширина останнього елемента

Я використовую FlatList, щоб показати список елементів у двох стовпцях

<FlatList style={{margin:5}}
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>

Компонент картки - це лише вигляд із деякими стилями:

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>

Він працює нормально, але якщо кількість елементів непарна, останній рядок містить лише один елемент, і цей елемент розтягується на всю ширину екрана.

Як я можу встановити для елемента однакову ширину для інших?

Є кілька речей, які ви можете спробувати тут.

A) Встановлення заздалегідь визначеної ширини для картки (можливо, дорівнює висоті, яку ви встановили?). Тоді можна використовуватиalignItems для того, щоб карта була розташована посередині або ліворуч - Не впевнені, що ви хотіли тут.

Б) Якщо є парна кількість карток, ви можете додати порожній вигляд в кінці, щоб заповнити цей простір. Я вважаю цей метод досить незграбним, але корисним при спробі залишити простір для майбутніх елементів.

В) Просто використовуйте alignItems: 'space-between, я люблю використовувати це для центрування елементів, але вам доведеться визначити ширину або використовувати щось на зразокflex:0.5

Я пропоную більше дослідити flexbox, щоб допомогти вам у цьому, оскільки важко розказати контекст цієї ситуації. Я припускаю, що наведені вище методи допоможуть, але якщо ні, ось кілька посилань, на які ви можете ознайомитись -

Перше посилання

Друга ланка

Третя ланка _{Посилання порушено}

Сподіваюся, це допомагає. Якщо вам потрібні додаткові роз’яснення - просто запитайте

для вашого випадку використовуйте флекс: 1/2

отже: Ваш товар повинен мати гнучкість 1 / (кількість стовпців), якщо у Вас 3 стовпці, Ваш товар повинен мати гнучкість: 1/3

Ви можете спробувати отримати поточну ширину пристрою за допомогою Dimensions, прорахувати кількість залежно від кількості стовпців, які ви хочете відтворити, мінус поля та встановити це як minWidth і maxWidth.

Наприклад:

const {height, width} = Dimensions.get('window');
const itemWidth = (width - 15) / 2;

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View>

Це найчистіший спосіб стилізувати a FlatListзі стовпцями з рівним інтервалом:

    <FlatList style={{margin:5}}
        numColumns={2}                  // set number of columns 
        columnWrapperStyle={style.row}  // space them out evenly
        
        data={this.state.items}
        keyExtractor={(item, index) => item.id }
        renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
    />       

    const style = StyleSheet.create({
        row: {
            flex: 1,
            justifyContent: "space-around"
        }
    });

Причиною цього є те, що ваша картка має стиль flex: 1, тому вона намагатиметься розширити весь простір, що залишився. Ви можете це виправити, додавши maxWidth: '50%'у свій стиль картки

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130, maxWidth: '50%'}} ></View>

Пропозиція @Emilius Mfuruki хороша, але якщо у вас є текст із різною довжиною, він не працює ідеально. Потім використовуйте цю ширину всередині перегляду елемента:

const {height, width} = Dimensions.get('window');
const itemWidth = (width - (MarginFromTheSide * 2 + MarginInBetween * (n-1))) / n;

У використанні FlatList:

columnWrapperStyle={{
            flex: 1,
            justifyContent: 'space-evenly',
          }}

Працює ідеально.

Ви можете використовувати ListFooterComponent = {this.renderFooter}

просто використовуйте flex: 0,5 та ширину: '50% '