I'm menggunakan FlatList untuk menampilkan daftar item dalam dua kolom
<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}/> }
/>
Kartu komponen hanya melihat dengan beberapa gaya:
<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>
Hal ini bekerja dengan baik, tetapi jika jumlah barang yang aneh, baris terakhir hanya berisi satu item dan item yang membentang dengan lebar penuh dari layar.
Bagaimana saya dapat mengatur item dengan lebar yang sama dari orang lain?
untuk kasus anda gunakan flex: 1/2
<Lihat gaya={{ flex: 1/2, margin: 5, backgroundColor: '#ddd', tinggi: 130}} >
oleh karena itu: Anda barang harus memiliki flex 1/(jumlah kolom) jika anda memiliki 3 kolom item anda harus memiliki flex:1/3
Ada beberapa hal yang dapat anda coba di sini.
A) Pengaturan pra-didefinisikan lebar untuk kartu ( Mungkin sama dengan tinggi anda've set? ). Kemudian anda dapat menggunakan alignItems
dalam rangka untuk memiliki kartu diposisikan di tengah atau di sebelah kiri - Yakin yang anda inginkan di sini.
B) Jika ada bahkan jumlah kartu, anda bisa menambahkan kosong Pemandangan di akhir dalam rangka mengisi ruang ini. Saya menemukan metode ini cukup kikuk tapi berguna ketika mencoba untuk meninggalkan ruang untuk unsur-unsur masa depan.
C) Hanya menggunakan alignItems: 'ruang-antara
, saya ingin menggunakan ini untuk pusat barang, tetapi anda akan memiliki untuk menentukan lebar, atau menggunakan sesuatu seperti flex:0.5
Saya sarankan meneliti lebih lanjut ke flexbox untuk membantu anda dengan ini, karena sulit untuk mengetahui konteks dari situasi ini. I'm asumsi metode di atas akan membantu, tapi jika tidak, berikut adalah beberapa link untuk anda untuk melihat -
[Ketiga link]( Link Rusak
Semoga ini bisa membantu. Jika anda membutuhkan klarifikasi lebih lanjut - sekedar bertanya
Anda dapat mencoba untuk mendapatkan arus lebar dari perangkat melalui Dimensi, melakukan beberapa matematika berdasarkan jumlah kolom yang anda inginkan untuk membuat, minus dari margin dan menetapkan bahwa sebagai minWidth dan maxWidth.
Misalnya:
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"
}
});
Alasan untuk itu adalah Kartu anda memiliki gaya flex: 1
, jadi ia akan mencoba untuk memperluas semua ruang yang tetap.
Anda dapat memperbaikinya dengan menambahkan maxWidth: '50%'
untuk Kartu anda gaya
<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130, maxWidth: '50%'}} ></View>
periksa apakah jumlah barang yang aneh, jika jumlahnya ganjil, memberikan gaya khusus untuk item terakhir. misalnya)
{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:{
}