Я'м с помощью 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/2
<смотреть стиль={{ гибкий: 1/2, маржа: 5, свойство backgroundColor: '#ДДД', высота: 130}} ></вид>
поэтому: Ваш пункт должны иметь гибкий на 1/(количество столбцов) если у вас есть 3 колонки ваш товар должен иметь шлейф:1/3
Theres несколько вещей, которые вы можете попробовать здесь.
А) установив предварительно определенный размер карты ( может быть равна высоте вы've сет? ). Затем вы можете использовать alignItems
, чтобы иметь карты расположены в середине или слева - не уверен, что вы хотели здесь.
Б) если есть четное количество карт, вы можете добавить пустой взгляд в конце, чтобы заполнить это пространство. Я нахожу этот метод довольно неуклюжим, но полезно, когда пытается оставить место для будущих элементов.
С) просто использовать alignItems: 'пространство между ними, я бы использовать это, чтобы элементы центра, но вы должны определить ширину, или использовать что-то вроде флекса:0.5
Я предлагаю больше исследования на основе, чтобы помочь вам с этим, так как трудно сказать в контексте данной ситуации. Я'м считая перечисленных выше методов поможет, а если нет, то вот несколько ссылок для вас, чтобы посмотреть ...
<дель>[третья ссылка](
<суб>связь оборвана</суб>Надеюсь, что это помогает. Если вам нужны любые дополнительные разъяснения - спрашивайте
Вы можете попробовать, чтобы получить текущую ширину устройства размеры, посчитаем, основываясь на количестве колонок, которые вы хотите сделать, минус с поля и установите ее в качестве свойства 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>
<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"
}
});
Причина этого в вашей карте есть стиль гибкий трубопровод: 1
, поэтому он будет пытаться расширить все пространство оставаться.
Вы можете исправить это путем добавления значение maxwidth: '50%'
ваш стиль карты
<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130, maxWidth: '50%'}} ></View>
проверить, является ли число элементов-нечетное, если число нечетное, придают особый стиль к последнему элементу. ЭГ)
{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:{
}