blocks|key|4363637|text|您可以尝试通过Dimensions获取设备的当前宽度，根据要呈现的列数进行一些计算，减去边距并将其设置为minWidth和maxWidth。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363638|例如：|4363639|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>|code-block|syntax|javascript|4363640|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can try to get the current width of the device via Dimensions, do some math based on the number of columns you want to render, minus off the margins and set that as the minWidth and maxWidth.

For example:

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

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

blocks|key|4363682|text|它的原因是你的卡有风格的flex:+1，所以它会尝试扩展所有剩余的空间。您可以通过将maxWidth:+'50%25'添加到您的卡片样式来修复它|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4363683|<View+style={{+flex:+1,+margin:+5,+backgroundColor:+'#ddd',+height:+130,+maxWidth:+'50%25'}}+></View>|code-block|syntax|javascript|4363684|entityMap^0|C|7|16|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

The reason for it is your Card have style <code>flex: 1</code>, so it will try to expand all the space remain. 
You can fix it by add <code>maxWidth: '50%'</code> to your Card style

<pre><code>&lt;View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130, maxWidth: '50%'}} &gt;&lt;/View&gt;
</code></pre>

blocks|key|4363716|text|这是设置带有列且间隔均匀的FlatList样式的最简洁方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4363717|++++<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"
++++++++}
++++});|code-block|syntax|javascript|4363718|entityMap^0|D|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<h3>This is the cleanest way to style a <code>FlatList</code> with columns and spaced evenly:</h3>
<pre><code> &lt;FlatList style={{margin:5}}
 numColumns={2} // set number of columns 
 columnWrapperStyle={style.row} // space them out evenly
 
 data={this.state.items}
 keyExtractor={(item, index) =&gt; item.id }
 renderItem={(item) =&gt; &lt;Card image={item.item.gallery_image_url} text={item.item.name}/&gt; }
 /&gt; 

 const style = StyleSheet.create({
 row: {
 flex: 1,
 justifyContent: &quot;space-around&quot;
 }
 });
</code></pre>

blocks|key|4364250|text|@埃米利乌斯·姆弗鲁基的建议很好，但如果你的文本长度不一，它就不能完美地工作。然后在项目视图中使用此宽度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4364251|const+{height,+width}+=+Dimensions.get('window');
const+itemWidth+=+(width+-+(MarginFromTheSide+*+2+%2B+MarginInBetween+*+(n-1)))+/+n;|code-block|syntax|javascript|4364252|在FlatList使用中：|4364253|columnWrapperStyle={{
++++++++++++flex:+1,
++++++++++++justifyContent:+'space-evenly',
++++++++++}}|4364254|效果很好。|4364255|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

@Emilius Mfuruki suggestion is good, but if you have text with varying length it doesn't work perfectly. Then use this width inside your item view:
<pre class="lang-js prettyprint-override"><code>const {height, width} = Dimensions.get('window');
const itemWidth = (width - (MarginFromTheSide * 2 + MarginInBetween * (n-1))) / n;
</code></pre>
In FlatList use:
<pre class="lang-js prettyprint-override"><code>columnWrapperStyle={{
 flex: 1,
 justifyContent: 'space-evenly',
 }}
</code></pre>
Works perfectly.

blocks|key|4363839|text|您可以使用ListFooterComponent={this.renderFooter}|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363840|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can use ListFooterComponent={this.renderFooter}

blocks|key|4363866|text|只需使用flex:0.5和width:'50%25‘|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363867|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

just use flex:0.5 and width:'50%'

blocks|key|4363976|text|我尝试了上面的一些解决方案，但我仍然有一些关于最后一项(2列列表)的页边距的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363977|​|4363978|📷|atomic|offset|length|4363979|4363980|我的解决方案是简单地将项目包装到父容器中，将原始容器保留为flex:+1，将项目的父容器保留为flex:+0.5，这样它就可以正确地获取边距。|style|CODE|4363981|itemContainer:+{
++flex:+0.5,
},
itemSubContainer:+{
++flex:+1,
++marginHorizontal:+margin,
},|code-block|syntax|javascript|4363982|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1b1437a52f433e73ff48054b34f8b141.png|imageAlt^0|0|0|0|1|0|0|0|T|7|1B|9|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|I|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@$G|19|H|1A|L|M]|$G|1B|H|1C|L|M]]|9|@]|A|$]]|$1|N|3|O|5|P|7|1D|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

I tried some of the solutions above but I still had some problems with the margins on the last item (2 columns list).
<a href="https://i.stack.imgur.com/19bLT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/19bLT.png" alt="enter image description here" /></a>
My solution was simply wrapping the item into a parent container, leaving the original container with <code>flex: 1</code> and the parent container of the item with <code>flex: 0.5</code> so it would take the margin correctly.
<pre><code>itemContainer: {
 flex: 0.5,
},
itemSubContainer: {
 flex: 1,
 marginHorizontal: margin,
},
</code></pre>

blocks|key|4364549|text|最简单的解决方案是计算一下。假设我们每行有2个视图，我们想给每个边10个边距，它看起来像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4364550|​|4364551|📷|atomic|offset|length|4364552|4364553|正如你在上面的图像中看到的，每个视图在水平方向上有2个边距。(红色矩形的内部)，所以我们必须从宽度中减去边距、列数和2的乘积。|4364554|import+{+Dimensions+}+from+'react-native';
const+{width}+=+Dimensions.get("window")
const+column+=+2
const+margin+=+10
const+SIZE+=+(width+-+(margin+*+column+*+2))+/+column
<View+style={{+margin:+10,+width:+SIZE+}}+></View>|code-block|syntax|javascript|4364555|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1bf161e94c82228f98760cf1ee80bfc5.png|imageAlt^0|0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@$G|12|H|13|1|14]]|A|$]]|$1|I|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|17|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

The simplest solution is do the math.
Imagine we have 2 View for each Row and we want to give 10 margin to every side it will look something like that:
<a href="https://i.stack.imgur.com/smQmW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/smQmW.png" alt="enter image description here" /></a>
As you see in the image above each View have 2 margins in horizontal. (inside of red rectangle)
So we have to subtract the product of margin, number of column and 2 from the width.
<pre><code>import { Dimensions } from 'react-native';
const {width} = Dimensions.get(&quot;window&quot;)
const column = 2
const margin = 10
const SIZE = (width - (margin * column * 2)) / column
&lt;View style={{ margin: 10, width: SIZE }} &gt;&lt;/View&gt;
</code></pre>

I'm using a FlatList to show a list of items in two columns

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

The card component is just a view with some styles:

<pre><code>&lt;View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} &gt;&lt;/View&gt;
</code></pre>

It is working fine, but if the number of items is odd, the last row only contains one item and that item stretches to the full width of the screen.

How can I set the item to the same width of the others?

<a href="https://i.stack.imgur.com/yvFBk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yvFBk.png" alt="enter image description here"></a>

React Native FlatList with columns, Last item width

容器

我使用FlatList在两列中显示项目列表<FlatList style={{margin:5}} data={this.state.items} numColumns={2} keyExtractor={(item, index) => item.id } renderItem={(item) => <Car...

问具有列的React原生FlatList，最后一个项目宽度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有列的React原生FlatList，最后一个项目宽度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有列的React原生FlatList，最后一个项目宽度
EN