React Native 如何使用FlatList实现电商产品列表（卡视图）

React 前端之家
前端之家收集整理的这篇文章主要介绍了React Native 如何使用FlatList实现电商产品列表（卡视图），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

https://m.jd.com/index/recommend.action?_format_=json&page=1

链接返回数据如下：

{"staticDynVersion":"_7_1_0","isLoginFlag":false,"recommend":"{\"waterFlow\":\"0\",\"code\":\"0\",\"wareInfoList\":[{\"presaleWare\":0,\"stockStateId\":33,\"wname\":\"印言 衬衫女2018春装新款韩版宽松显瘦简约水墨印花衬衣套头雪纺衫长袖上衣大码女装 水墨花 XL\",\"adword\":\"\",\"isDotScheme\":false,\"jdShop\":false,\"sourceValueFeedback\":\"{\\\"sid\\\":\\\"c19f16cc-bb01-46c1-a60e-c9e880431542\\\",\\\"index\\\":\\\"0\\\",\\\"source\\\":\\\"1\\\",\\\"page\\\":\\\"1\\\",\\\"reqsig\\\":\\\"f1f9c6cb76562430548b6660dd0cf74e48efac4\\\",\\\"flow\\\":\\\"20\\\",\\\"skuid\\\":\\\"24840102011\\\",\\\"expid\\\":\\\"100\\\"}\",\"promotion\":\"false\",\"venderId\":\"663385\",\"jdPrice\":\"128.00\",\"followCount\":\"\",\"good\":\"100%\",\"flow\":\"20\",\"markFlag\":0,\"imageurlType\":0,\"isPlusWare\":false,\"remainNum\":-1,\"isSamWare\":false,\"abt\":\"-1\",\"canNegFeedback\":\"1\",\"endRemainTime\":0,\"similarEnter\":\"1\",\"feminine\":false,\"canFreeRead\":\"false\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t15796\/70\/1908677410\/220123\/8e02a5ce\/5a675ea0N244b7752.jpg!q70.jpg\",\"wareId\":\"24840102011\",\"expid\":\"100\",\"couponSortType\":0,\"sourceValue\":\"1_0_24840102011_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"sid\":\"c19f16cc-bb01-46c1-a60e-c9e880431542\",\"mp\":0,\"startRemainTime\":0,\"itemType\":0,\"isFeedBackSlide\":0,\"category1\":\"1315\",\"commentCount\":\"239\",\"category3\":\"9713\",\"canAddCart\":\"0\",\"category2\":\"1343\",\"source\":\"1\",\"sourceValueSimilar\":\"0_.0_0_24840102011_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"reqsig\":\"f1f9c6cb76562430548b6660dd0cf74e48efac4\",\"book\":\"false\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8yNDg0MDEwMjAxMS5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zPlHXq-yV6lLX97sCHGCtv7u_WTXASmx778uiRPEKLUUQbFFvRvrVWLNNr848RUd-q5kEW6tkoTHYknGO4K4MtKSJAPEDZCxjLs-_j23qE4u3H5OeNSi7SmY7wR8GsiljUtTLxn_073nGLWbHNsGrQJfxg0EtW79vYqdx4xc4R-lFixgvG25oqHzlSoanYPzrdJdgQIk_vd991ZpYYIlOfXvX_jHgb9coZr4iQw44wZYg0WClbnN-pH94r-Gx5FiMXBUCfKS7nx_eBnBAb8ItW_Hg6Qh8csk0spi9XgdgdfHBhIO_AXbPH6MQBkbzv_Owsf-KCBA1yv8EGh22paFkYZlNZlewcbzt8a1ItfP94YWQ&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d24840102011$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"24840102011#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#-100#-100#1#0#0\"},{\"adword\":\"\",\"presaleWare\":0,\\\"index\\\":\\\"1\\\",\\\"source\\\":\\\"0\\\",\\\"skuid\\\":\\\"4053463\\\",\"venderId\":\"1000015268\",\"jdPrice\":\"25.80\",\"recomReasonTab\":\"tab_var_071\",\"abt\":\"\",\"recomText\":\"满99元减50元\",\"iconC\":\"tab_020\",\"wareId\":\"4053463\",\"sourceValue\":\"1_1_4053463_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_大家都在买的热销商品_f1f9c6cb76562430548b6660dd0cf74e48efac4_114\",\"category1\":\"1320\",\"category3\":\"1591\",\"category2\":\"1583\",\"sourceValueSimilar\":\"0_.0_1_4053463_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"wname\":\"三只松鼠 坚果炒货 零食 每日坚果 手剥开口松子100g\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t5170\/122\/443463169\/348090\/2a68bff4\/58ff269fN7b7e087b.jpg!q70.jpg\",\"recomReason\":\"大家都在买的热销商品\",\"commentCount\":\"703555\",\"source\":\"0\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=4053463$index=0$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=8bd3a0eb655fa4cf4955f55ec42a49fd027dd692\",\"exposureSourceValue\":\"4053463#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#满减#114#1#1#0\"},{\"presaleWare\":0,\"wname\":\"印言 雪纺衫女2018春装新款韩版修身显瘦长袖条纹衬衫打底衬衣套头上衣OL职业装 条纹 XL\",\\\"index\\\":\\\"2\\\",\\\"skuid\\\":\\\"24648200210\\\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t19417\/41\/265573464\/242749\/edf7ae9e\/5a675ec2N5f5a76d8.jpg!q70.jpg\",\"wareId\":\"24648200210\",\"sourceValue\":\"1_2_24648200210_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"295\",\"sourceValueSimilar\":\"0_.0_2_24648200210_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8yNDY0ODIwMDIxMC5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zPlHXq-yV6lLX97sCHGCtv7-p6EE0d_SIqLzoPKTe01DScLHinIpMXlEiTFDdBR20gzHCVgc3F3FKFXQewKNlTIsqBRYlpMeFCpyTHFtX4-pZ5CqlkM1kxcLMWAaqq-c8-RrZbmdjD9qdQCOxmlIpD63CoG1akekjiKYotrfeKk6rj44qJJOuxvO_GmULfvyNt9TpJh8qyyIPEEUt2LQuwxqeYEP3UZnzUGfsRuWTv7PyaOdZRZtowXxOtcd1p9DNTWz2AU-XhUJZeO6PkRQoFcNo9s6DJKQ6VYZGk6qAVkjqH8SlL5s18hVnLD-JOjtxUQNkqWmBbwSAYSVJTVivBwevDyxBD6eUFJH_hp7FgW7A&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d24648200210$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"24648200210#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#-100#-100#1#2#0\"},\"wname\":\"男生帆布背包男士双肩包潮流时尚书包大学生休闲旅行包韩版 灰色\",\\\"index\\\":\\\"3\\\",\\\"skuid\\\":\\\"13180766655\\\",\"venderId\":\"611209\",\"jdPrice\":\"59.00\",\"good\":\"99%\",\"iconC\":\"tab_060\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t5989\/103\/2689496288\/489612\/886a6e96\/59437fc1N51dd4998.jpg!q70.jpg\",\"wareId\":\"13180766655\",\"sourceValue\":\"1_3_13180766655_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_大家都在买的热销商品_f1f9c6cb76562430548b6660dd0cf74e48efac4_114\",\"category1\":\"1672\",\"commentCount\":\"3444\",\"category3\":\"5265\",\"category2\":\"2577\",\"sourceValueSimilar\":\"0_.0_3_13180766655_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=13180766655$index=1$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=9d4b60d44189cd29243702e7a7a09c93fa6583e0\",\"exposureSourceValue\":\"13180766655#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#领券#114#1#3#0\"},\"wname\":\"佳衣衬美雪纺衫2018春装新款韩版百搭系带蝴蝶结长袖纯色宽松衬衫女1806 酒红色 M\",\\\"index\\\":\\\"4\\\",\\\"skuid\\\":\\\"23949466856\\\",\"venderId\":\"221268\",\"jdPrice\":\"78.00\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t17824\/103\/694033210\/248333\/5c2c6e44\/5aa143d6N28d7337d.jpg!q70.jpg\",\"wareId\":\"23949466856\",\"sourceValue\":\"1_4_23949466856_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"349\",\"sourceValueSimilar\":\"0_.0_4_23949466856_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8yMzk0OTQ2Njg1Ni5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zPlHXq-yV6lLX97sCHGCtv7RoHtRxhS7wRacc0h4_VwbLfC14L_WY9DANAv9jVZwPLFfpGriIjhGA6BTo5k7wGcpv9osFKCA6SCNkyIfc8lkzu65pSWp5knv8160H7x3WSGbPPECSNzvNKLB4Fx6t9q-6qAsMU_ynXakKUrFrv3rL-cvYRqA02c39-iPTTqexal0dxZOvC74UFFO2vHCBW69Y_2lgHCr4IaXCFxuPG25hCe4xk2CDp0NK6FxYk1HfBgayYjwjWjVJn4MkfPat69vnkEdK4H3eJiQ6esr2sJfX36nyydBORPJCwVLPIm2Zin9BaN-CemWX2P-ftFeov1bt_SHH2mmTTglCpCXTy75w&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d23949466856$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"23949466856#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#-100#-100#1#4#0\"},\"wname\":\"三只松鼠 坚果炒货 零食奶油味 夏威夷果265g\/袋\",\\\"index\\\":\\\"5\\\",\\\"skuid\\\":\\\"2518087\\\",\"jdPrice\":\"24.90\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t2185\/5\/2707056436\/356808\/2be83568\/56ea3a0fN12d87b59.jpg!q70.jpg\",\"wareId\":\"2518087\",\"mainVideoId\":\"4747484\",\"sourceValue\":\"1_5_2518087_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"874553\",\"sourceValueSimilar\":\"0_.0_5_2518087_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=2518087$index=2$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=a64bd714f4c6b83a4732e8989b314ead0b5b027c\",\"exposureSourceValue\":\"2518087#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#-100#-100#1#5#0\"},\"wname\":\"朵拉蜜儿 雪纺衫女2018春季新款女装韩版百搭修身印花长袖雪纺衬衫女上衣 5855 米黄 L\",\\\"index\\\":\\\"6\\\",\\\"skuid\\\":\\\"24036096601\\\",\"venderId\":\"47192\",\"jdPrice\":\"98.00\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t15910\/134\/2430365346\/381717\/3dcd079d\/5aa7eb21N8c3bf432.jpg!q70.jpg\",\"wareId\":\"24036096601\",\"sourceValue\":\"1_6_24036096601_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"188\",\"sourceValueSimilar\":\"0_.0_6_24036096601_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8yNDAzNjA5NjYwMS5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zPlHXq-yV6lLX97sCHGCtv7i_nh__aLbDrcj9wgofWWr77t6j8F24tYVlmhn0g2d5Y4d_BKpPYjmcxm1jnSLwzVnVAm7425Kwoci8Z7X6eqsWkBSVbXBPc4OSJae4L9WlbDeKDpmi48ysyAweyE8ao6mtE1bIVN-A2Wqgw-8fMZjshYJTgTpG4N2ll433Dgf5gWXq0ojnRBCozK3qWdVywNlPjce58juox1B8NMprbWY8G6Mfbn_8dOgTUWxzcer1DW9WYDZyBIgjMr7uKAgzlmQJGUD6SS1PPCzH_6I0K2kYaQS8H-rSNUw3glYxli_yXBU6_bbUniFP27lYEgCxu-ID2_XQgkGFg6Q0ghfm9A4Q&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d24036096601$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"24036096601#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#-100#-100#1#6#0\"},\"wname\":\"飞科(FLYCO)电吹风机家用FH6251负离子可折叠吹风筒 1600W\",\\\"index\\\":\\\"7\\\",\\\"skuid\\\":\\\"407901\\\",\"venderId\":\"1000003143\",\"jdPrice\":\"49.00\",\"good\":\"98%\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t6583\/243\/2147298728\/187603\/ae49bc29\/595ca4e5N7f819d0d.jpg!q70.jpg\",\"wareId\":\"407901\",\"sourceValue\":\"1_7_407901_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"category1\":\"737\",\"commentCount\":\"510891\",\"category3\":\"740\",\"category2\":\"1276\",\"sourceValueSimilar\":\"0_.0_7_407901_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=407901$index=3$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=f2beee6467634224ea5ead22223848a2b247bab5\",\"exposureSourceValue\":\"407901#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#领券#-100#1#7#0\"},\"wname\":\"雪纺衫女长袖2018春季新款女装OL通勤百搭百搭职业衬衫修身显瘦雪纺上衣 8052 灰蓝色 L\",\\\"index\\\":\\\"8\\\",\\\"skuid\\\":\\\"23794881842\\\",\"venderId\":\"82482\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t15940\/258\/1195430843\/494778\/841ed8d\/5a4cc732N0109c54f.jpg!q70.jpg\",\"wareId\":\"23794881842\",\"sourceValue\":\"1_8_23794881842_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"126\",\"sourceValueSimilar\":\"0_.0_8_23794881842_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8yMzc5NDg4MTg0Mi5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zPlHXq-yV6lLX97sCHGCtv77kPVqAVDODdfnA3BcAUM8PUL-3Bz9PdhGZ5sAxrfcRhJgRXtJFdFY9iSWNgZ_ugRHeMBUONT6vyJjohwOA6K-DQmhAvvc0izkkG7h_gOpT7Tvyrz2z39igjfq7aKkxHJzo26z6mxBjv2wu6Knmg7yfhALz7OwGEShqgx9lxvqbhDm_GP4Nx1Xu_Mxfmmm-rVIlf-oAjIaZpivIqurU_F67isCnvXvdX_XdM-RX_iP5-ogynH_6ilq4FPqTS2LgC-X42EJncY1c7le7z2CZiKZ1MGilaWj40sywdcUFeN3gZYwQ4k1hKbJ3ASX6IWpiKh8HHun-KocVzgIgbrRxmPlg&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d23794881842$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"23794881842#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#-100#-100#1#8#0\"},\"wname\":\"三只松鼠坚果炒货零食每日坚果开心果100g\",\\\"index\\\":\\\"9\\\",\\\"skuid\\\":\\\"4803334\\\",\"jdPrice\":\"26.80\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t4438\/33\/3558503930\/311608\/fb746cc\/58ff26c3Nbad96e13.jpg!q70.jpg\",\"wareId\":\"4803334\",\"sourceValue\":\"1_9_4803334_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"879326\",\"sourceValueSimilar\":\"0_.0_9_4803334_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=4803334$index=4$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=a80246a243c6d28291345dff1070afbe5d9d2ea5\",\"exposureSourceValue\":\"4803334#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#满减#-100#1#9#0\"},\"wname\":\"skechers斯凯奇旗舰店\",\"stockStateId\":0,\"venderId\":\"\",\"followCount\":\"373437\",\"good\":\"\",\"remainNum\":0,\"imageurl\":\"http:\/\/img30.360buyimg.com\/popshop\/jfs\/t1531\/138\/37414413\/9787\/a958dd8d\/55502151Ndb1c79f8.jpg\",\"wareId\":\"56083\",\"expid\":\"107\",\"sourceValue\":\"1_10_56083\",\"sid\":\"0\",\"itemType\":1,\"commentCount\":\"\",\"subWareList\":[{\"imageUrl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t18583\/357\/1727579235\/198714\/de444fde\/5ad7dc0eNb5184bd2.jpg!q70.jpg\",\"wareId\":\"11167099311\"},{\"imageUrl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t18664\/140\/1785078091\/183862\/d9444b0a\/5ad7dc15Ndcdef2b1.jpg!q70.jpg\",\"wareId\":\"11167099313\"},{\"imageUrl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t17704\/140\/1765366185\/154807\/f6fee04c\/5ad7dc11N026c29a1.jpg!q70.jpg\",\"wareId\":\"23658194376\"}],\"reqsig\":\"98a35fc52d63b7f1c224892b09bdf540bfb1deee\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.621001&v=src=rec$action=1$reqsig=98a35fc52d63b7f1c224892b09bdf540bfb1deee$enb=1$sku=0$p=621001$pin=$uuid=15241154652772144018038$csku=56083$index=0$st=0$adcli=$expid=107$im=sku%5E11167099311%2C11167099313%2C23658194376&rid=759257272302928894&ver=1&sig=ee40c053819947e7682049f6453a7066316e5b58\",\"mpIcom2Order\":{}},\"wname\":\"【屈臣氏】潘婷（pantene）洗发露750ml*2件 丝质顺滑\",\\\"index\\\":\\\"11\\\",\\\"skuid\\\":\\\"11688006486\\\",\"venderId\":\"43614\",\"jdPrice\":\"79.80\",\"abt\":\"0\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_g16\/M00\/02\/0D\/rBEbRlNsOLEIAAAAAAMjiAegXSMAAAeFANO92sAAyOg423.jpg!q70.jpg\",\"wareId\":\"11688006486\",\"sourceValue\":\"1_11_11688006486_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"category1\":\"1316\",\"commentCount\":\"486\",\"category3\":\"11922\",\"category2\":\"1386\",\"sourceValueSimilar\":\"0_.0_11_11688006486_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8xMTY4ODAwNjQ4Ni5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zNtAr5l1tsV7YAlHy2Kn5nd6q3SgbPXYTg7EygZsmGsmKPwGmZiMHnoRHIfr6XIJsYmZBnT5fW0x7HUV0-ZEw1-eAFZFUFFbALwvWq3-09H5Kq_CUHMIvd4xNAUHOssfWrMo_9VxWpt7ZqDa8owf-RVtB3iyKwlDYI0f8pvHT1NUePhnl9h7gNSSDYF74Hkzw06zPEbbS9cajTyhfIp2cwJZyy90T1YVH4wgFvzmT17arWpeNmOi1Br-3ZIv7CaU6FODwBNIUD3_bnVCQkIMl4PdhLWhqadO3xp1Psyb64h3YYqkoPNk4a75ivJkvLw8liHBjIXkKzcpSV8U1a8qzQZmhEshNLWfBunV2dLJVjciWjeoJo8i9U_7E68GbyE-KbTW7PxPsClXY-YyIL-ev7ChU_zUamZmeiZwM8xSuKhFw&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d11688006486$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"11688006486#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#领券#-100#1#11#0\"},\"wname\":\"游棉中学生双肩包女背包小学生男大容量书包 音乐【充电版】送胸包\",\\\"index\\\":\\\"12\\\",\\\"skuid\\\":\\\"26981559832\\\",\"venderId\":\"133576\",\"jdPrice\":\"76.00\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t17278\/113\/1400699455\/394293\/67141675\/5ac8cdc3N904008b9.jpg!q70.jpg\",\"wareId\":\"26981559832\",\"sourceValue\":\"1_12_26981559832_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"242\",\"sourceValueSimilar\":\"0_.0_12_26981559832_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=26981559832$index=5$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=32ac108b0270bae455169eaa3a17135007f65294\",\"exposureSourceValue\":\"26981559832#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#领券#-100#1#12#0\"},\"wname\":\"美的（Midea） 三门电冰箱 风冷无霜冰箱 三门冰箱小型家用冰箱BCD-231WTM(E) \",\\\"index\\\":\\\"13\\\",\\\"skuid\\\":\\\"13932214597\\\",\"venderId\":\"149007\",\"jdPrice\":\"1999.00\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t17068\/52\/1755407478\/261705\/c1bd3230\/5ad7f88eN660952fc.png!q70.jpg\",\"wareId\":\"13932214597\",\"sourceValue\":\"1_13_13932214597_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"2826\",\"category3\":\"878\",\"category2\":\"794\",\"sourceValueSimilar\":\"0_.0_13_13932214597_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8xMzkzMjIxNDU5Ny5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zN2fzOTFx_ArmayCSpuIofiokgO93SvVTNBPP5dptqGD0Liaj-JRkzMT2OEaKUfIgqAs9ugDuigwESsDfOwhveD3wthLs9RZSbffPJvBIf4S9Qxvt6kW12J-HCeQt3NuwOS_t-rdfCtGywEFGlehCHRgGvEXFWsAseUBFnk0sr7shvBJSngdo0u_8W_fRRrpesfPQ_FAP_4oQYzSDjDFcBgTQ4JPaWKCDmofyvAzp2yhKvPs4rhXndntjlsSBlpeWwPOF8WbBR-ZD1qafDv0Np9LwN6-sVE2QZRJvxEeycUns3m26spuISoARnbYVnKAaZkoehcutPu_i2QNXCLTdPBJwLo2H1t9DPcYpxvLWxv2u_9CPApR8ycUXnwEV_qv4kHulIq9zHKZ-y84jMtec9N&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d13932214597$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"13932214597#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#-100#-100#1#13#0\"},\"wname\":\"索尔诺 置物架 厨房置物架 层架 落地收纳储物家具 办公室书架浴室客厅架子货架四层Z614 Z614\",\\\"index\\\":\\\"14\\\",\\\"skuid\\\":\\\"10269790556\\\",\"venderId\":\"26065\",\"jdPrice\":\"19.90\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t14464\/137\/2168679294\/127898\/3ac524ab\/5a766e3dN4cb0872f.png!q70.jpg\",\"wareId\":\"10269790556\",\"mainVideoId\":\"4949597\",\"sourceValue\":\"1_14_10269790556_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"category1\":\"9847\",\"commentCount\":\"44132\",\"category3\":\"9888\",\"category2\":\"9852\",\"sourceValueSimilar\":\"0_.0_14_10269790556_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=10269790556$index=6$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=eca540667a772033588c217cf6099f4125743e10\",\"exposureSourceValue\":\"10269790556#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#领券#-100#1#14#0\"},\"wname\":\"美的（Midea）冰箱无霜电冰箱 双门 双开门冰箱 对开门冰箱 BCD-520WKM(E) \",\\\"index\\\":\\\"15\\\",\\\"skuid\\\":\\\"11642612465\\\",\"jdPrice\":\"2899.00\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t19510\/339\/1796851981\/325203\/f3247533\/5ad7f858Nfaa9fb96.png!q70.jpg\",\"wareId\":\"11642612465\",\"mainVideoId\":\"5787781\",\"sourceValue\":\"1_15_11642612465_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"6133\",\"sourceValueSimilar\":\"0_.0_15_11642612465_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8xMTY0MjYxMjQ2NS5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zPl8xe24vg6ZExej-YUYsFB-wQfgusbpFK0waXXGlN95SPeOHRRLsHW1RG0ZLzHf_EUKzs4R8OlIiC4JoASOTEYV6ktYfXMDvEt-4TE0KhD37GiHHEZI--ibyt2tk-stWFcQRLJwWEYDBPC0zUR9VPTMmEMFdV5V5jD8iMvOIWGX5GZgmGDQ1bbR8_9K9HFkZde-WCzhnmUFrUiJtHdBBpLofjiEs6piyu6pDES6YNd3nBRJ4Zi7E-c7JG1Mf6zRao7f5Hiodz5oTS7ht7Y7AMV7UUHLLlizTpXOlRS3eoEeQyFH3Q-G8WVnSXdkF8fOKaSA_T2GEna00wO28pPSJRTXitxCjgwf-PrOfbf_TEdDSdEnLocXL4EWrq7Yd1T6BbfI1LeEbY35uvm8J6HZlze&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d11642612465$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"11642612465#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#-100#-100#1#15#0\"},\"wname\":\"第九城(VNINE)头层牛皮钱包休闲男士多卡位带活页耐磨耐刮皮夹 横款绅士钱包VQ732945\",\\\"index\\\":\\\"16\\\",\\\"skuid\\\":\\\"12155316042\\\",\"venderId\":\"619636\",\"jdPrice\":\"99.00\",\"recomText\":\"满99元减20元\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t5992\/30\/3182866948\/279223\/93cd6692\/594c6e1dNd2c30280.jpg!q70.jpg\",\"wareId\":\"12155316042\",\"sourceValue\":\"1_16_12155316042_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"264\",\"category3\":\"2584\",\"category2\":\"2576\",\"sourceValueSimilar\":\"0_.0_16_12155316042_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=12155316042$index=7$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=39852048aa165ab7b67cb46e4c8ef97b8db22645\",\"exposureSourceValue\":\"12155316042#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#满减#-100#1#16#0\"},\"wname\":\"波司登打底裤女外穿加绒秋冬加厚保暖裤显瘦一体踩脚裤 滑面黑色 均码  80斤-150斤\",\\\"index\\\":\\\"17\\\",\\\"skuid\\\":\\\"15151157817\\\",\"venderId\":\"141840\",\"jdPrice\":\"79.00\",\"recomText\":\"\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t16957\/358\/303703920\/435556\/fc606712\/5a694733Nfcb7eb72.jpg!q70.jpg\",\"wareId\":\"15151157817\",\"mainVideoId\":\"3038668\",\"sourceValue\":\"1_17_15151157817_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_1_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"8531\",\"category3\":\"9716\",\"sourceValueSimilar\":\"0_.0_17_15151157817_100_1_20_1_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/ccc-x.jd.com\/dsp\/nc?ext=aHR0cDovL2l0ZW0ubS5qZC5jb20vcHJvZHVjdC8xNTE1MTE1NzgxNy5odG1s&log=QIXEQcncfLeBlpKAS3sGFM-ywC17S4OeH0IR-aua5zO3E6Q6b7aQCwIZOyxc57D1BkLLgbHtT6p7We7c4DO33FYuEWAlVK8LMEKH8_UBdd3IbG6Slzl-l9mX3aCtG9GsvzfYynNU2uTcSb5KFwA1SeCHXSXXH3c_sNZItWsVjLH0qufoJRQkAGVC_zUKzHqICHhhlzVv6O9wV9XGY16RhrfzOTitBDwhgzkZgvNo-zviyWbm3QT1J3YtXEs3UzoTFi2NSJSz5MjxNjOnIcgel1KihPGESTpQ66_3T0ak7Aog6uDUcLtzZTq1xvw3foEU54LghtF9r-Eo7KP6LjHP6o6eB0c_leNd6tdIGQtr0S5doKOY2Y7Ex5WmAY7NgSM5IRgaXEeaUTJN2gTlDxQJlEl1dUZ5j5B_IOReXUjU7MxbA5-6FOnXf5PBFg8xSini&v=404&ru=http%3a%2f%2fmercury.jd.local%2flog.gif%3ft%3drec.000000%26v%3dsrc%3dmix$action%3d8$sku%3d-1$csku%3d15151157817$adposid%3d1856$adsid%3dc19f16cc-bb01-46c1-a60e-c9e880431542\",\"exposureSourceValue\":\"15151157817#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#1#0#100#满减#-100#1#17#0\"},\"wname\":\"飞科(FLYCO)电吹风机家用FH6218大功率吹风筒负离子 2000W\",\\\"index\\\":\\\"18\\\",\\\"skuid\\\":\\\"169484\\\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t15436\/130\/2109563627\/77439\/e14cb4f9\/5a6ee15fN6553431e.jpg!q70.jpg\",\"wareId\":\"169484\",\"sourceValue\":\"1_18_169484_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"569111\",\"sourceValueSimilar\":\"0_.0_18_169484_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=169484$index=8$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=d9605315a6f89495b05ad7305e8b6969504e360f\",\"exposureSourceValue\":\"169484#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#领券#-100#1#18#0\"},\"wname\":\"【京东秒杀】光亮 洗车拖把洗车刷长杆汽车掸子洗车套装工具配件用品 【特价】棉线洗车刷套装\",\\\"index\\\":\\\"19\\\",\\\"skuid\\\":\\\"11387296529\\\",\"venderId\":\"636779\",\"jdPrice\":\"32.00\",\"isPlusWare\":true,\"priceColor\":\"232326\",\"tryPlusPrice\":\"29.90\",\"priceIcon\":\"http:\/\/m.360buyimg.com\/mobilecms\/jfs\/t3331\/312\/2223477324\/2115\/42d33f4b\/584539b7N0c09e061.png\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t16432\/302\/655223559\/584843\/1fc1d3e3\/5a389484N34404283.jpg!q70.jpg\",\"wareId\":\"11387296529\",\"sourceValue\":\"1_19_11387296529_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"category1\":\"6728\",\"category3\":\"11880\",\"commentCount\":\"16473\",\"category2\":\"6743\",\"sourceValueSimilar\":\"0_.0_19_11387296529_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=11387296529$index=9$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=d2a629f129ed2a3f4523cb4bce2083d8d6bc2bd\",\"exposureSourceValue\":\"11387296529#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#1#100#-100#-100#1#19#0\"},\"wname\":\"飞科(FLYCO)电吹风机家用FH6232大功率吹风筒 2000W\",\\\"index\\\":\\\"20\\\",\\\"skuid\\\":\\\"1151846\\\",\"jdPrice\":\"49.90\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t4297\/365\/3367344325\/86566\/afcf71af\/58df406bNabb3a853.jpg!q70.jpg\",\"wareId\":\"1151846\",\"sourceValue\":\"1_20_1151846_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"commentCount\":\"481525\",\"sourceValueSimilar\":\"0_.0_20_1151846_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=1151846$index=10$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=a95001a133ed34bc5090ca806817d27d7be3e732\",\"exposureSourceValue\":\"1151846#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#领券#-100#1#20#0\"},\"markHeight\":13,\\\"index\\\":\\\"21\\\",\\\"skuid\\\":\\\"5120596\\\",\"venderId\":\"1000081504\",\"jdPrice\":\"35.00\",\"recomText\":\"满159元减60元\",\"wareId\":\"5120596\",\"sourceValue\":\"1_21_5120596_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"category3\":\"1429\",\"category2\":\"1387\",\"markImageUrl\":\"http:\/\/m.360buyimg.com\/mobilecms\/jfs\/t3550\/170\/1022007648\/4411\/2aa81f7d\/581aee98N564e678b.png\",\"sourceValueSimilar\":\"0_.0_21_5120596_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"wname\":\"日本 无印良品MUJI 无漂白化妆棉180枚（原色） 敏感肌用 超柔软\",\"markWidth\":37,\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t7579\/244\/1608820500\/152607\/906c58ae\/599e753fNda46ddef.jpg!q70.jpg\",\"commentCount\":\"35343\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=5120596$index=11$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=53a050d9a937b135fd32c89113f11373bdeb0e77\",\"exposureSourceValue\":\"5120596#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#满减#-100#1#21#0\"},\"wname\":\"朗美科（Lightmates）CH009 插电无线遥控调光五孔LED小夜灯  床头过道婴儿房喂奶灯\",\\\"index\\\":\\\"22\\\",\\\"skuid\\\":\\\"4976356\\\",\"venderId\":\"1000008501\",\"imageurl\":\"http:\/\/m.360buyimg.com\/\/mobilecms\/s276x276_jfs\/t5278\/144\/982955067\/327387\/54414a9b\/59099580N7b374a06.jpg!q70.jpg\",\"wareId\":\"4976356\",\"sourceValue\":\"1_22_4976356_100_20_c19f16cc-bb01-46c1-a60e-c9e880431542_0_-100_f1f9c6cb76562430548b6660dd0cf74e48efac4_-100\",\"category1\":\"9855\",\"commentCount\":\"23441\",\"category3\":\"9905\",\"category2\":\"9856\",\"sourceValueSimilar\":\"0_.0_22_4976356_100_1_20_0_c19f16cc-bb01-46c1-a60e-c9e880431542\",\"clickUrl\":\"http:\/\/mercury.jd.com\/log.gif?t=rec.619128&v=src=rec$action=1$reqsig=f1f9c6cb76562430548b6660dd0cf74e48efac4$enb=1$sku=0$p=619128$pin=$uuid=1524115465$csku=4976356$index=12$st=0$adcli=$expid=100$im=&rid=1449297270953459825&ver=1&sig=aa39044e61efa4a4a5806720b8d26bafdbe0218c\",\"exposureSourceValue\":\"4976356#f1f9c6cb76562430548b6660dd0cf74e48efac4#c19f16cc-bb01-46c1-a60e-c9e880431542#20#0#0#100#领券#-100#1#22#0\"}],\"expid\":\"619128\"}"}


App.js文件完整的代码如下：

import React,{ Component } from 'react';
import {
  StyleSheet,View
} from 'react-native';
import ProductList from './src/ProductList';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ProductList/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,}
});
ListItem.js文件完整的代码如下： 
import React,{Component} from 'React';
import {
TouchableWithoutFeedback,Image,Animated,View,Text
} from 'react-native';

export default class ListItem extends Component {


	render() {
		const { id,itemWidth,image,wname,jdPrice,onPressItem } = this.props
		//console.log(onPressItem)
		return (
			<TouchableWithoutFeedback style={{flex:1,alignItems:'center'}} onPress = {() => onPressItem(id)}>
				<View style = {{marginTop: 2,marginBottom: 2,paddingRight: 4,}}>
					<Image style={{ width: itemWidth,height: 200 }} source={image} />
					<Text numberOfLines={4}
                        style={{
                            width: itemWidth,flexWrap: 'wrap',fontSize: 12,color: 'black',flex: 1,paddingLeft: 5,paddingRight: 5,height: 65,backgroundColor: 'white'
                        }}
                    >{wname}</Text>
                    <View style={{flexDirection:'row',justifyContent: 'space-around',paddingRight: 10,backgroundColor: 'white',paddingBottom: 5}}>
                        <Text
                            style={{
                                flex: 1,alignSelf: 'flex-start',textAlign: 'left',fontSize: 13,color: '#f15353'
                            }}
                        >￥{jdPrice}</Text>
                        <TouchableWithoutFeedback>
                            <View
                                style={{
                                    width:50,height:20,backgroundColor: 'pink',borderRadius:30,justifyContent: 'center',alignItems: 'center',}}
                            >
                                <Text style={{color:'#f15353',fontSize:12,textAlign:'center'}}>看相似</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
				</View>
			</TouchableWithoutFeedback>
		);
	}
}

ProductList.js文件完整的代码如下：

import React,{Component} from 'React';
import {
StyleSheet,FlatList,Dimensions
} from 'react-native';
import ListItem from './ListItem';
const SCREEN_WIDTH = Dimensions.get('window').width;

export default class ProductList extends Component {
    state = {
        columns: 2,key: 1,array: [],}

    constructor(props) {
        super(props)
        this.getProducts = this.getProducts.bind(this)
    }

    getProducts() {
        //JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
        //JSON.parse() 方法用于将一个 JSON 字符串转换为对象
        fetch('https://m.jd.com/index/recommend.action?_format_=json&page=1',{
            method: 'GET'
        }).then((response)=> {
            return response.json()
        }).then((respnoseJson) => {
            return JSON.parse(respnoseJson.recommend)
        }).then((recommend) => {
            // console.log(recommend.wareInfoList)
            let newArray = this.state.array.slice()
            let concatArray = newArray.concat(recommend.wareInfoList)
            this.setState({
                array: concatArray
            })
        }).catch((error) => {
            console.warn(error);
        }).done();
    }

    componentDidMount(){
        this.getProducts()
    }

    onPressingItem(wareId) {
        let url = 'https://item.m.jd.com/product/' + wareId + '.html';
        console.log(url);
    }

    render() {
        const { columns,key,array } = this.state
        return (
            <View style = {styles.container}>
                <FlatList
                    key = {key}
                    numColumns = {columns}
                    data = {array}
                    renderItem = {({ item,index }) => {
                        return <ListItem
                            id = {item.wareId}
                            itemWidth = {SCREEN_WIDTH / columns - 2 }
                            image = {{ uri: item.imageurl }}
                            wname = { item.wname }
                            jdPrice = { item.jdPrice }
                            onPressItem = {this.onPressingItem}
                            />
                    }}
                    keyExtractor = {
                        (item,index) => { return  item.wareId }
                    }
                />
             </View>
        );
    }
}
const styles = StyleSheet.create({
 container: {
 flex: 1,backgroundColor: '#EEE9E9',flexDirection:'row',},})

安卓和苹果手机模拟器运行效果如下：

原文链接：https://www.f2er.com/react/301647.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作