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>
        )
    }
}

推荐阅读更多精彩内容