Question

我构建反应原生应用程序，我试图在flatList中每行制作2个具有相等宽度的项目。我得到的是每行2件但宽度不等。

const itemProduct = props => {
return (
    <Button style={style.container} onPress={props.onPress}>
        <View style={style.imageContainer}>
            <LoadingImage resizeMode='contain' resizeMethod='resize' source={props.Image ? { uri: 'https://www.saramashkim.co.il/'+props.Image } : require('../../assets/images/default_no_image.png')} style={style.image} />
        </View>
        <View style={style.textContainer}>
            <Text style={style.productName}>vodka</Text>
            <View style={style.specialOffer}>
                {props.inPromotion ? <Text>special offer</Text> : null}
            </View>

            <View style={style.bottomLine}>
                <Text style={style.costText}>lorem ipos</Text><View style={style.bottomLine}>{props.discount ? <Text style={style.Price}>lorem ipos{parseFloat(Math.round(props.price_per_case * 100) / 100).toFixed(2)}</Text> : null}<Text style={style.discountPrice}>dollar{parseFloat(Math.round(props.price_per_case * ((100 - props.discount) / 100) * 100) / 100).toFixed(2)}</Text></View>
            </View>
        </View>
    </Button>
    )
}

式

const style = StyleSheet.create({
container : {
    backgroundColor: colors.dark_red,
    paddingTop:calcSize(10),
    margin:calcSize(10),
    minWidth:(width-15)/2,

},
imageContainer:{
    flex:1,  
    alignItems:'center'
},
textContainer:{
    flex:2,
    //backgroundColor:'red',
    paddingHorizontal:calcSize(30)
},
image:{ 
    width: calcSize(175), 
    height: calcSize(175) 
},
brandName:{
    color:'#7c7c7c',
    fontFamily:'Poppins-Light',
    fontSize:calcSize(25),
    marginBottom:calcSize(15)
},
productName:{
    color: colors.black,
    fontFamily:'Poppins-Regular',
    fontSize:calcSize(20),
    width:calcSize(300)

},

flatList

<View style={style.list}>
   <FlatList
       refreshing={this.state.refreshing}
       numColumns = {2}
       onRefresh={this.onListRefresh}
       data={products}
       keyExtractor={(o, i) => i.toString()}
       renderItem={this.renderProductListItem}
       ListFooterComponent={() => {
          if ((this.state.products.length < this.state.totalFound || this.state.loading) && !this.state.refreshing)
             return <Spinner style={style.loading} />
             return <View style={style.loading} />
          }}

          ItemSeparatorComponent={() => <View style={style.separator} />} />
   </View>
</View>

列表样式

list:{
    flex:1,
    flexDirection:'row',
    paddingHorizontal: calcSize(30),
}

照片

我希望每行制作2个相同宽度的项目，也可以在照片中制作，因为你可以看到左边的文字不等于右边所以它的问题。

Answer 1

使用flexbox和flexbasis和flex增长试试这个

<View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', flexGrow: 0}}>
   <View style={{flexBasis: '50%', height: 50, backgroundColor: 'powderblue'}} />
   <View style={{flexBasis: '50%', height: 50, backgroundColor: 'skyblue'}} />
   <View style={{flexBasis: '50%', height: 50, backgroundColor: 'steelblue'}} />
   <View style={{flexBasis: '50%', height: 50, backgroundColor: 'blue'}} />
</View>

在我的Android设备中测试过。

现场演示is over here！试一试

如果有任何问题评论低于

Answer 2

现在，您只将子元素的 width 设置为minWidth:(width-15)/2，将 margin 设置为{{ 1}} 导致此问题的主要容器的 margin:calcSize(10), 为padding。

如果您想采用paddingHorizontal: calcSize(30)方式，则需要正确计算间距

minWidth

由于问题中未提及minWidth = (screenWidth - (paddingHorizontal * 2) - (margin * 2) - (separatorWidth)) / 2 = (screenWidth - 80) / 2

paddingHorizontal：设置separatorWidth就像设置paddingHorizontal和paddingLeft一样。
margin：设置保证金与设置paddingRight，marginTop，marginLeft和marginBottom中的每一项具有相同的效果。
```
marginRight
```

更好的方法是使用list:{ flex:1, paddingHorizontal: calcSize(30), }, container : { flex: 1, //<== Either add a height or a flex backgroundColor: 'darkred', paddingTop:calcSize(10), margin:calcSize(10), minWidth:(width-80)/2, },和height，以便flex可以相应缩放。

这是一个小吃demo

反应原生扁平列表每行2项，宽度不相等

2 个答案: