react-native map函数遍历数据及其布局

最新推荐文章于 2025-04-01 12:00:02 发布

Aichiwawacai

最新推荐文章于 2025-04-01 12:00:02 发布

阅读量2.2k

点赞数

文章标签： reactjs css

本文链接：https://blog.youkuaiyun.com/Aichiwawacai/article/details/103757671

版权

本文介绍了在react-native中使用map函数遍历包含图片的数据时如何进行有效的布局。通过设置不同层级的背景色来辅助理解布局结构，强调了在flex布局中设置宽度的重要性，以及使用百分比尺寸和计算每行商品宽度以适应屏幕和避免重叠的细节。总结了五个关键步骤，帮助实现理想的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native map函数遍历数据及其布局

当需要在react-native 中用map函数遍历带图片的数据时，小编总会发现，布局有点别扭，
效果图类似下面这样的图

在这里插入图片描述
我先以遍历如下数据得到产品列表为例借机总结一下遍历数据及布局的注意事项：

先开始分析，最后总结

var newGoodsList=[
        { "goodCmtCount": 0, "couponConflict": true, "scenePicUrl": "https://yanxuan-item.nosdn.127.net/cb49a9c6b210f0fe4a55939e35ba92ad.jpg", "listPicUrl": "https://yanxuan-item.nosdn.127.net/a4aa937602c5ad5bd50fbc4fe825875f.png", "tagId": 0, "simpleDesc": "1秒速热，手暖不冰冷", "primarySkuPreSellPrice": 99.00, "promTag": "暖冬特惠", "limitedFlag": 203, "newItemFlag": false, "showPicUrl": "https://yanxuan-item.nosdn.127.net/12ab3d518b6b97cdf916a43d41b72bab.png", "itemTagList": [{ "itemId": 3842014, "tagId": 128113086, "freshmanExclusive": false, "name": "暖冬特惠", "subType": 203, "forbidJump": false, "type": 2 }], "primarySkuPreSellStatus": 1, "pieceNum": 0, "extra": { "resource": { "materialType": "商品id", "materialId": "54635643", "itemId": "3842014", "materialContentFrom": 1, "materialName": "高颜值萌宠暖手宝", "rcmdSort": false, "taskType": 1, "itemFrom": 0, "crmUserGroupName": "", "resourcesId": 1, "itemIdList": ["3842014"], "crmUserGroupId": "0", "taskId": "54643570" }, "modelType": 1 }, "listPromBanner": { "valid": true, "styleType": 0, "bannerContentUrl": "https://yanxuan.nosdn.127.net/73de0050620397b41099c356292b28c8.png", "promoTitle": "暖冬特惠", "promoSubTitle": "¥79起", "timeType": 0, "bannerTitleUrl": "https://yanxuan.nosdn.127.net/ce3597696f4c886d1d81a7d94f8cfe6e.png", "content": "限800件 仅剩1天" }, "id": 3842014, "sellVolume": 584, "isCouponConflict": true, "colorNum": 2, "primaryPicUrl": "https://yanxuan-item.nosdn.127.net/12ab3d518b6b97cdf916a43d41b72bab.png", "displaySkuId": 300187493, "pieceUnitDesc": "件", "resourcesId": 0, "discountFlag": false, "name": "高颜值萌宠暖手宝", "productPlace": "", "counterPrice": 99.00, "couponPrice": 0, "cutFlag": false, "retailPrice": 79, "primary": true, "status": 2 },
        { "goodCmtCount": 0, "couponConflict": true, "scenePicUrl": "https://yanxuan-item.nosdn.127.net/65bf079a56f4e0cf9aa22c0dc707a1d7.jpg", "listPicUrl": "https://yanxuan-item.nosdn.127.net/87eb4a0e4d38c000d25366ef83fe1282.png", "tagId": 0, "simpleDesc": "软滑多汁，鲜甜可口", "primarySkuPreSellPrice": 0, "promTag": "好货内部价", "limitedFlag": 204, "newItemFlag": true, "showPicUrl": "https://yanxuan-item.nosdn.127.net/93057264fb0201548f78043c0d02ddfb.png", "itemTagList": [{ "itemId": 3987527, "tagId": 0, "freshmanExclusive": false, "name": "新品", "subType": 0, "forbidJump": false, "type": 1 }, { "itemId": 3987527, "tagId": 128111314, "freshmanExclusive": false, "name": "好货内部价", "subType": 204, "forbidJump": false, "type": 2 }], "primarySkuPreSellStatus": 0, "pieceNum": 0, "extra": { "resource": { "materialType": "商品id", "materialId": "54637411", "itemId": "3987527", "materialContentFrom": 1, "materialName": "浅尝即心动，月露蜜瓜 2个", "rcmdSort": false, "taskType": 1, "itemFrom": 0, "crmUserGroupName": "", "resourcesId": 2, "itemIdList": ["3987527"], "crmUserGroupId": "0", "taskId": "54643571" }, "modelType": 1 }, "listPromBanner": { "valid": true, "styleType": 0, "bannerContentUrl": "https://yanxuan.nosdn.127.net/73de0050620397b41099c356292b28c8.png", "promoTitle": "好货内部价", "promoSubTitle": "¥75", "timeType": 0, "bannerTitleUrl": "https://yanxuan.nosdn.127.net/ce3597696f4c886d1d81a7d94f8

最低0.47元/天解锁文章