react-native map函数遍历数据及其布局
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/ce3597696f4c886d1d81a7d94f8cfe6e.png", "content": "仅剩2天" }, "id": 3987527, "sellVolume": 232, "isCouponConflict": true, "colorNum": 0, "primaryPicUrl": "https://yanxuan-item.nosdn.127.net/93057264fb0201548f78043c0d02ddfb.png", "displaySkuId": 300191788, "pieceUnitDesc": "件", "resourcesId": 0, "discountFlag": false, "name": "浅尝即心动，月露蜜瓜 2个", "productPlace": "", "counterPrice": 99.00, "couponPrice": 0, "cutFlag": false, "retailPrice": 75, "primary": true, "status": 2 },
{ "goodCmtCount": 0, "couponConflict": false, "scenePicUrl": "https://yanxuan-item.nosdn.127.net/38a6b2cec23ca66d9e695141fb5468c5.jpg", "listPicUrl": "https://yanxuan-item.nosdn.127.net/2004b5743f48f9217f28ef18dff53abf.png", "tagId": 0, "simpleDesc": "上等品质，纯粹本真", "primarySkuPreSellPrice": 0, "limitedFlag": 0, "newItemFlag": false, "showPicUrl": "https://yanxuan-item.nosdn.127.net/7f4a74c400ee527d815974432a2d7789.png", "itemTagList": [{ "itemId": 3857006, "tagId": 128113114, "freshmanExclusive": false, "name": "满折", "subType": 109, "forbidJump": false, "type": 2 }], "primarySkuPreSellStatus": 0, "pieceNum": 0, "extra": { "resource": { "materialType": "商品id", "materialId": "54637131", "itemId": "3857006", "materialContentFrom": 1, "materialName": "祺宴 坚果果干礼盒1.15千克", "rcmdSort": false, "taskType": 1, "itemFrom": 0, "crmUserGroupName": "", "resourcesId": 3, "itemIdList": ["3857006"], "crmUserGroupId": "0", "taskId": "54643572" }, "modelType": 1 }, "id": 3857006, "sellVolume": 8083, "isCouponConflict": false, "colorNum": 0, "primaryPicUrl": "https://yanxuan-item.nosdn.127.net/7f4a74c400ee527d815974432a2d7789.png", "displaySkuId": 300088010, "pieceUnitDesc": "件", "featuredSeries": { "showFeatureSeriesNameFlag": false, "seriesDesc": "2020年货系列", "name": "2020年货系列", "videoShowPicUrl": "https://yanxuan.nosdn.127.net/9f02b6f77f8a26074efb865255f74ef8.jpg", "iconUrl": "https://yanxuan.nosdn.127.net/9a2722b00af634328125c1ee6d9676bb.png", "id": 1000064, "seriesStory": "为年节送礼开发的系列产品，礼盒包装，送人彰显心意。", "detailPicUrl": "https://yanxuan.nosdn.127.net/7be0696fdc6aaf92250711b5ba033749.jpg" }, "resourcesId": 0, "discountFlag": false, "name": "祺宴 坚果果干礼盒1.15千克", "productPlace": "", "couponPrice": 0, "cutFlag": false, "retailPrice": 259.00, "primary": true, "status": 2 },
{ "goodCmtCount": 0, "couponConflict": true, "scenePicUrl": "https://yanxuan-item.nosdn.127.net/736123b4929580cf7a8a640cbbf372cc.jpg", "listPicUrl": "https://yanxuan-item.nosdn.127.net/61e62a52cc8914a6e2f99b1d9127c6de.png", "tagId": 0, "simpleDesc": "咕噜噜，一只饱满松果滚进杯子里~", "primarySkuPreSellPrice": 118.00, "promTag": "新品尝鲜价", "limitedFlag": 203, "newItemFlag": false, "showPicUrl": "https://yanxuan-item.nosdn.127.net/85950caa29fe56e586fe430bb0fc317a.png", "itemTagList": [{ "itemId": 3885045, "tagId": 128111282, "freshmanExclusive": false, "name": "新品尝鲜价", "subType": 203, "forbidJump": false, "type": 2 }], "primarySkuPreSellStatus": 1, "pieceNum": 0, "extra": { "resource": { "materialType": "商品id", "materialId": "54635951", "itemId": "3885045", "materialContentFrom": 1, "materialName": "嗨，小松塔 松果星球双层耐热玻璃杯", "rcmdSort": false, "taskType": 1, "itemFrom": 0, "crmUserGroupName": "", "resourcesId": 4, "itemIdList": ["3885045"], "crmUserGroupId": "0", "taskId": "54638197" }, "modelType": 1 }, "listPromBanner": { "valid": true, "styleType": 0, "bannerContentUrl": "https://yanxuan.nosdn.127.net/73de0050620397b41099c356292b28c8.png", "promoTitle": "新品尝鲜价", "promoSubTitle": "¥88起", "timeType": 0, "bannerTitleUrl": "https://yanxuan.nosdn.127.net/ce3597696f4c886d1d81a7d94f8cfe6e.png", "content": "限1200件 仅剩1天" }, "id": 3885045, "sellVolume": 387, "isCouponConflict": true, "colorNum": 0, "primaryPicUrl": "https://yanxuan-item.nosdn.127.net/85950caa29fe56e586fe430bb0fc317a.png", "displaySkuId": 300189199, "pieceUnitDesc": "件", "featuredSeries": { "showFeatureSeriesNameFlag": false, "seriesDesc": "原创设计圣诞系列", "name": "2019圣诞系列", "videoShowPicUrl": "https://yanxuan.nosdn.127.net/9d9acbef71b8fda0b5fa7041ae76a51e.jpg", "iconUrl": "https://yanxuan.nosdn.127.net/d8dfff90fa87aa7f56b020df7a1cf3a8.jpg", "id": 1000060, "seriesStory": "2019圣诞系列以松果宇宙为主题，守护温暖冬季。", "detailPicUrl": "https://yanxuan.nosdn.127.net/5449069431f791bd67245425f07f75e8.jpg" }, "resourcesId": 0, "discountFlag": false, "name": "嗨，小松塔 松果星球双层耐热玻璃杯", "productPlace": "", "counterPrice": 118.00, "couponPrice": 0, "cutFlag": false, "retailPrice": 88, "primary": true, "status": 2 },
{ "goodCmtCount": 0, "couponConflict": true, "scenePicUrl": "https://yanxuan-item.nosdn.127.net/81ae3998a574c79bd9e8d0ffb81b3530.png", "listPicUrl": "https://yanxuan-item.nosdn.127.net/1377e19f267b46afa79c42db9a0cb25d.png", "tagId": 1080000, "simpleDesc": "网罗全球小食 一把过足瘾", "primarySkuPreSellPrice": 0, "promTag": "新品尝鲜价", "limitedFlag": 203, "newItemFlag": true, "showPicUrl": "https://yanxuan-item.nosdn.127.net/3693368efa6dd48d59ccf9bd14939e65.png", "itemTagList": [{ "itemId": 3987832, "tagId": 0, "freshmanExclusive": false, "name": "新品", "subType": 0, "forbidJump": false, "type": 1 }, { "itemId": 3987832, "tagId": 128113059, "freshmanExclusive": false, "name": "新品尝鲜价", "subType": 203, "forbidJump": false, "type": 2 }], "primarySkuPreSellStatus": 0, "pieceNum": 0, "extra": { "resource": { "materialType": "商品id", "materialId": "54637491", "itemId": "3987832", "materialContentFrom": 1, "materialName": "开启世界美食之旅 年货零食大礼包", "rcmdSort": false, "taskType": 1, "itemFrom": 0, "crmUserGroupName": "", "resourcesId": 5, "itemIdList": ["3987832"], "crmUserGroupId": "0", "taskId": "54638198" }, "modelType": 1 }, "listPromBanner": { "valid": true, "styleType": 0, "bannerContentUrl": "https://yanxuan.nosdn.127.net/73de0050620397b41099c356292b28c8.png", "promoTitle": "新品尝鲜价", "promoSubTitle": "¥89起", "timeType": 0, "bannerTitleUrl": "https://yanxuan.nosdn.127.net/ce3597696f4c886d1d81a7d94f8cfe6e.png", "content": "限1100件 仅剩1天" }, "id": 3987832, "sellVolume": 919, "isCouponConflict": true, "colorNum": 0, "primaryPicUrl": "https://yanxuan-item.nosdn.127.net/3693368efa6dd48d59ccf9bd14939e65.png", "displaySkuId": 300193815, "tagName": "海外制造商", "pieceUnitDesc": "件", "resourcesId": 0, "discountFlag": false, "name": "开启世界美食之旅 年货零食大礼包", "productPlace": "", "counterPrice": 99.00, "couponPrice": 0, "cutFlag": false, "retailPrice": 89, "primary": true, "status": 2 },
{ "goodCmtCount": 0, "couponConflict": true, "scenePicUrl": "https://yanxuan-item.nosdn.127.net/aa195ae326985a8d4bc61b34b9bfa81f.jpg", "listPicUrl": "https://yanxuan-item.nosdn.127.net/9e6b05025d4ed71d655ea754e82e814f.png", "tagId": 0, "simpleDesc": "日本进口染发膏，2019年流行色号", "primarySkuPreSellPrice": 0, "limitedFlag": 204, "newItemFlag": true, "showPicUrl": "https://yanxuan-item.nosdn.127.net/364bb4175dd73987f11dc1a701e28a2f.png", "itemTagList": [{ "itemId": 3986552, "tagId": 0, "freshmanExclusive": false, "name": "新品", "subType": 0, "forbidJump": false, "type": 1 }, { "itemId": 3986552, "tagId": 128111261, "freshmanExclusive": false, "name": "特价", "subType": 204, "forbidJump": false, "type": 2 }], "primarySkuPreSellStatus": 0, "pieceNum": 0, "extra": { "resource": { "materialType": "商品id", "materialId": "54637295", "itemId": "3986552", "materialContentFrom": 1, "materialName": "日本制造 免调和遮白染发膏", "rcmdSort": false, "taskType": 1, "itemFrom": 0, "crmUserGroupName": "", "resourcesId": 6, "itemIdList": ["3986552"], "crmUserGroupId": "0", "taskId": "54643573" }, "modelType": 1 }, "id": 3986552, "sellVolume": 3381, "isCouponConflict": true, "colorNum": 0, "primaryPicUrl": "https://yanxuan-item.nosdn.127.net/364bb4175dd73987f11dc1a701e28a2f.png", "displaySkuId": 300189350, "pieceUnitDesc": "件", "resourcesId": 0, "discountFlag": false, "name": "日本制造 免调和遮白染发膏", "productPlace": "", "counterPrice": 79.00, "couponPrice": 0, "cutFlag": false, "retailPrice": 73, "primary": true, "status": 2 },
{ "goodCmtCount": 0, "couponConflict": true, "scenePicUrl": "https://yanxuan-item.nosdn.127.net/95a93761176364b5b946dbfb26b96a6b.jpeg", "listPicUrl": "https://yanxuan-item.nosdn.127.net/705cc62045723af3067d433a107144a7.png", "tagId": 0, "simpleDesc": "大雾量横扫室内干燥，你的冬季水润伴侣。", "primarySkuPreSellPrice": 0, "limitedFlag": 0, "newItemFlag": false, "showPicUrl": "https://yanxuan-item.nosdn.127.net/49c844a7c8d0db8fcec74b371b5f2ffb.png", "itemTagList": [], "primarySkuPreSellStatus": 0, "pieceNum": 0, "extra": { "resource": { "materialType": "商品id", "materialId": "54636754", "itemId": "3986413", "materialContentFrom": 1, "materialName": "热雾SPA日式大容量加湿器", "rcmdSort": false, "taskType": 1, "itemFrom": 0, "crmUserGroupName": "", "resourcesId": 7, "itemIdList": ["3986413"], "crmUserGroupId": "0", "taskId": "54643574" }, "modelType": 1 }, "id": 3986413, "sellVolume": 1301, "isCouponConflict": true, "colorNum": 0, "primaryPicUrl": "https://yanxuan-item.nosdn.127.net/49c844a7c8d0db8fcec74b371b5f2ffb.png", "displaySkuId": 300186770, "pieceUnitDesc": "件", "resourcesId": 0, "discountFlag": false, "name": "热雾SPA日式大容量加湿器", "productPlace": "", "couponPrice": 0, "cutFlag": false, "retailPrice": 249.00, "primary": true, "status": 2 },
{ "goodCmtCount": 0, "couponConflict": true, "scenePicUrl": "https://yanxuan-item.nosdn.127.net/7017fcf6257dff4dba4647d20851db80.png", "listPicUrl": "https://yanxuan-item.nosdn.127.net/4bef21cf6936779fb98405e9b686ddd1.png", "tagId": 0, "simpleDesc": "含春联*1、红包*10、福字*3、窗贴*2", "primarySkuPreSellPrice": 0, "promTag": "圣诞特惠", "limitedFlag": 204, "newItemFlag": true, "itemTagList": [{ "itemId": 3986327, "tagId": 0, "freshmanExclusive": false, "name": "新品", "subType": 0, "forbidJump": false, "type": 1 }, { "itemId": 3986327, "tagId": 128113021, "freshmanExclusive": false, "name": "圣诞特惠", "subType": 204, "forbidJump": false, "type": 2 }], "primarySkuPreSellStatus": 0, "pieceNum": 0, "extra": { "modelType": 3 }, "id": 3986327, "sellVolume": 2391, "isCouponConflict": true, "colorNum": 0, "primaryPicUrl": "https://yanxuan-item.nosdn.127.net/40b2a28283a29bc91dc2acaba0ad2d3e.png", "displaySkuId": 300186535, "pieceUnitDesc": "件", "featuredSeries": { "showFeatureSeriesNameFlag": false, "seriesDesc": "2020年货系列", "name": "2020年货系列", "videoShowPicUrl": "https://yanxuan.nosdn.127.net/9f02b6f77f8a26074efb865255f74ef8.jpg", "iconUrl": "https://yanxuan.nosdn.127.net/9a2722b00af634328125c1ee6d9676bb.png", "id": 1000064, "seriesStory": "为年节送礼开发的系列产品，礼盒包装，送人彰显心意。", "detailPicUrl": "https://yanxuan.nosdn.127.net/7be0696fdc6aaf92250711b5ba033749.jpg" }, "resourcesId": 0, "discountFlag": false, "name": "“万象新春”颐和园年物礼盒", "productPlace": "", "counterPrice": 58.00, "couponPrice": 49, "cutFlag": false, "retailPrice": 49, "primary": false, "status": 2 }
],
要将如下数据展示，使用如下方式，
class New extends React.Component{
render() {
return(
周一周四 · 新品首发
{
newGoodsList.map((item)=>{
return(
{item.name}
￥{item.retailPrice}
)
})
}
)
}
}
经过之前的教训，我发现要布好局，先给一些关键的标签设置背景色，
首先最外层的View
在给遍历部分的最外层设置颜色（.aNewB）
backgroundColor:'blue'
再给map函数中的第一个标签设置颜色（aNewBItem），
backgroundColor:'pink'
设置完这三个足以
然后给.aNewB赋样式，注意flex 布局赋在这个标签上，即map函数外层最近的标签上，注意宽度为自适应屏幕宽度，高度不要固定
aNewB: {
width: width,
height: "auto",
overflow: "hidden",
backgroundColor:'blue',
flex:1,
flexDirection:'row',
flexWrap:'wrap',
},
再给赋样式，由于使用了margin，所有每个商品的宽度要减去超过左右margin总和，我这个实例要实现每行两个商品，
width: width/2-50,
height:width/2,
marginTop: 10,
marginLeft: 21,
marginRight: 21,
marginBottom:70,
backgroundColor:'pink'
再结合其他的样式
const styles=StyleSheet.create({
aNewB: {
width: width,
height: "auto",
overflow: "hidden",
backgroundColor:'blue',
flex:1,
flexDirection:'row',
flexWrap:'wrap',
},
aNewBItem: {
width: width/2-50,
height:width/2,
marginTop: 10,
marginLeft: 21,
marginRight: 21,
marginBottom:70,
backgroundColor:'pink'
},
aNewBItemB:{
marginLeft: 42,
},
aNewBImg: {
width: 302,
height: 302,
},
aNewBName: {
textAlign: "center",
width: "100%",
height: 35,
marginBottom: 14,
overflow: "hidden",
fontSize: 30,
color: "#333",
},
aNewBPrice: {
textAlign: "center",
lineHeight: 30,
fontSize: 30,
color: "#b4282d",
},
})
就可以观察到如下的结果
再去掉背景色后，最终结果为
- 总结
a.给组件最外层，map函数最近的内外层标签上附上不同的背景色，
b. 给map函数最近的外层表现定义为flex布局，宽度最好是自适应屏幕宽度
aNewB: {
width: width,
height: "auto",
overflow: "hidden",
backgroundColor:'blue',
flex:1,
flexDirection:'row',
flexWrap:'wrap',
},
c.注意map函数内层的所有标签的尺寸最好为百分比，
d.给map函数最近内存标签赋样式，根据自己一行将要展示的数据计算每行的宽度，记得减去左右margin的尺寸，才能排的开
width: width/2-50,
height:width/2,
marginTop: 10,
marginLeft: 21,
marginRight: 21,
marginBottom:70,
backgroundColor:'pink'
e.调整完毕后去掉上述背景色
完毕~