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(<View><View style={{flex:1,alignItems: "center",flexDirection:'row', justifyContent: "center",height: 50,backgroundColor: "#fff"}}><Text className="txt">周一周四 · 新品首发</Text></View><View style={styles.aNewB}>{newGoodsList.map((item)=>{return(<View style={styles.aNewBItem} key={item.id}><Image style={{width:"100%",height:'100%'}} source`在这里插入代码片`={{uri:item.listPicUrl}} background-size="cover"/><Text style={styles.aNewBName}>{item.name}</Text><Text style={styles.aNewBPrice}>￥{item.retailPrice}</Text></View>)})}</View></View>)}
}

经过之前的教训，我发现要布好局，先给一些关键的标签设置背景色，
首先最外层的View

<View style={{backgroundColor:'green'}}>

在给遍历部分的最外层设置颜色（.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.调整完毕后去掉上述背景色

完毕~

react-native map函数遍历数据及其布局相关推荐

React Native之函数作为参数传递给另外一个函数去调用
1 用法我们一般喜欢把js里面的函数作为参数传递给另外一个函数,然后再调用这个函数,有点像C语言里面的函数指针 2 代码测试写了一个函数,2个参数分别是函数,然后更具数据决定调用哪个函数 /*** ...
[React Native Android 安利系列]样式与布局的书写
欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有: https://segmentfault.c ...
React Native 移动开发入门与实战
课程简介本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
React Native 调研报告
Facebook三月份开源了React Native iOS平台的框架,让移动开发人员和web开发者都各自兴奋了一把:native的移动开发者想的比较多的估计是Facebook的那句:"le ...
React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
ReactJs和React Native的那些事
介绍 1,React Js的目的是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就 ...
React Native应用实现步骤
React Native应用实现步骤在整个应用设计中,始终按照自下而上的原则进行.在大型的项目中,自下而上的设计方式简单,可以并行工作,并且可以在构建的同时写测试用例. React Native设计 ...
React Native初探
React Native初探转自:博客园叶小钗前言很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP ...
开发 React Native APP —— 从改造官方Demo开始（二）
经过第一部分开发 React Native APP -- 从改造官方 Demo 开始(一)介绍,App 框架基本构建完成,这部分主要讨论 UI/交互.App 发布前的准备工作及如何发布,具体内容包括: ...

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

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

react-native map函数遍历数据及其布局相关推荐

最新文章

热门文章