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>

Он работает нормально, но если количество элементов нечетное, последняя строка содержит только один элемент, и этот элемент растягивается до полной ширины экрана.

Как я могу установить элемент на одну и ту же ширину других?

Ответ 1

Есть несколько вещей, которые вы можете попробовать здесь.

A) Установка предопределенной ширины для карты (может быть равной установленной вами высоте?). Затем вы можете использовать alignItems для того, чтобы расположить карту посередине или слева - не уверены, какой вы хотели здесь.

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

C) Просто используйте alignItems: 'space-between, я хотел бы использовать это для alignItems: 'space-between элементов, но вам нужно будет определить ширину или использовать что-то вроде flex:0.5

Я предлагаю больше изучить flexbox, чтобы помочь вам в этом, так как сложно определить контекст этой ситуации. Я предполагаю, что приведенные выше методы помогут, но если нет, вот несколько ссылок, на которые вы можете посмотреть -

Первая ссылка

Вторая ссылка

~~Третья ссылка~~ _{Ссылка не работает}

Надеюсь это поможет. Если вам нужны дальнейшие разъяснения - просто спросите

Ответ 2

Вы можете попытаться получить текущую ширину устройства с помощью 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>

Ответ 3

для вашего случая используйте flex: 1/2

следовательно: ваш элемент должен иметь flex 1/(количество столбцов), если у вас есть 3 столбца, ваш элемент должен иметь flex: 1/3

Ответ 4

проверьте, является ли количество элементов нечетным, если число нечетное, придайте особый стиль последнему элементу. например)

 {this.props.count%2!= 0?
                <View style={this.props.entireList.indexOf(item) === this.props.entireList.length-1 ?stles.v1:styles.v2}></View>
 v1:{
 width:'48%'
}
v2:{
}

Ответ 5

Причина в том, что ваша карта имеет стиль flex: 1, поэтому она будет пытаться расширить все оставшееся пространство. Вы можете исправить это, добавив maxWidth: '50%' к стилю вашей карты

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

Ответ 6

Это самый чистый способ оформления `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"
        }
    });