javascript - react native 如何在 JSX 中循环查看组件

Question

我想做什么

我每行最多只补5张优惠券，如果优惠券的数量超过5张，我会移到下一行。

如果couponNum == 5

哦哦哦哦哦

如果couponNum == 12

哦哦哦哦哦

哦哦哦哦哦

哦哦

代码

<View style={styles.couponBox}>

    {this.createCoupon(couponNum)}

</View>
  
const styles = StyleSheet.create({
  couponBox: {
      flex: 1, 
      flexDirection: 'row',
      // alignItems: 'center',
      alignSelf: 'center',
      justifyContent: 'center', 
      backgroundColor: 'yellow',
      width: width - 100,
      height: height -200, 
  },
  circle: {
      width: 44,
      height: 44,
      borderRadius: 44/2,
      backgroundColor: colors.lightFink,
      alignItems: 'center',
      justifyContent: 'center',
  },
})

createCoupon = (couponNum) => {
    let coupons = []
    let i = 1;

    while( i <= couponNum ) {
        let children = []
        children.push(
            <View>
                <View style={{width: 50, height: 50, margin: 5, }}>
                    <View style={styles.circle}>
                        <Text style={{fontSize: 16,  }}>{i}</Text>
                    </View>
                </View>

            </View>
        )
        table.push(<View style={{flex: 2, flexDirection: 'row', }}>{children}</View>)      

        i++;
    }
    return coupons
}

但是这段代码是这样的..

如果couponNum == 5

哦哦哦哦哦

如果couponNum == 12

哦哦哦哦哦哦

我应该怎么做才能解决这个问题？

Answer 1

希望对您的查询有所帮助。

createCoupon = (couponNum) => {
    let coupons = [];
    let rows = couponNum % 5 == 0 ? couponNum/5 : (couponNum/5) +1;
    rows = parseInt(rows);
    let num = 1;

    for (let i = 1; i <= rows; i++){
        let children = [];
        let cols = i < rows ? 5 : couponNum % 5 > 0 ? couponNum % 5 : 5;

        for(let j = 1; j<= cols ; j++){
            children.push(
                <View key={num++}>
                    <View style={{width: 50, height: 50, margin: 5, }}>
                        <View style={styles.circle}>
                            <Text style={{fontSize: 16,  }}>{num}</Text>
                        </View>
                    </View>
                </View>
            );
        }
        coupons.push(<View key={i} style={{flex: 2, flexDirection: 'row', }}>{children}</View>)
    }
    return coupons
}