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

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

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