上篇文章中,我们一起构建了京东client的TabBar。在本文中。将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧!

1.相关控件调研

眼下在Github开源的轮播图控件,个人觉得做得比較好的,一个是react-native-swiper(https://github.com/leecade/react-native-swiper),一个是react-native-viewpager(https://github.com/race604/react-native-viewpager),而经过试用发现。react-native-swiper尽管效果和样式较多、控制方便,但在将它缩小为一个固定高度的视图时,其底部的指示符号(即几个点,例如以下图)就不见了,所以终于我推荐使用react-native-viewpager。简单好用。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAAA7CAYAAADxcPHqAAAgAElEQVR4Ab2d6Y40x5We34hcaumdEiVyKInUeOzx2D8M+K+vwIAvwgYM2/Ad2PNH9+DrMgz4jwfjZbRYXCSR7O7qrSozI4znxInq7Pq6v25SGougkqefOCcy4kRGvhmVS/gv//V/5K7/UFN3rSafanq4VtOePNr3N2q6uX2tpj/V1F6qyeea7qvt/nt7zs9m5S/V9Oea2m/d/8rtWn7G04XGh0t1/bmG9lJdOtdwf6lueaGh+Vpd+kDD/bfqlh9oaL5x+xu338fxr+Xf4z/9QMNDjfeNuumDmf21ur8vvrrQEGt936pbfTCzv1G3575/r3LiXaobzzXs6L9zjfFbNeOFpt2lmuW5pnipZjwv9upMU8B2vjp3+5BjX6tZnWoK12rG05ld4834cKppwD4p5bHHjZql+5t9rW75Q7Vxe6a+XWgbjtXnhba7Y/VxpW24UJ+l7S6rbw54s9K2O1efs7a7VHg383/CJ/VNr213oj732u5O1LfEP3P/SX3baxsqP37kysq70XiCq1di/7qVUvtzLCV43yu1lZ+o71/ja6WW+g/8s8dfrJXCqcffqV/0elL/4sj5pLSb8eq/dJ6dL91/z4+Lfx6L/xN+on55okT/pKG0b+X+if07Ub+ac+zvwo/VL089/k5b+m/p/Z/Iz7H61Zm24Vx9gk8W3/IzHfBpW/K/8vExMX6OHv0PefLxtboo4ys9lPG1dP/Kl2vFtLjSLm6V7m+0Gx+U+o12cVC6b7Qbg9ICG77Rbty6vXuFH/pTHv9d8Q8HPBzyscSfpKm/1i7sNN1ttJt2mtifMGq6a7SDL66105xjT6/wVHjKT/2Tx8+Vp1Jf9vh77vHTAacc+8ff2b88ue3+73D3Jy7tM36tHfuFv+DXpd1wWma2nBP/fXws9dNv+NOP9Oek0r9hLPmYvP/JA/tP3sk/eTLbeTzgjBPjPj4YJ3P/ffmX+FDGG+OO8Rd9/E1Bzb/6N3/9i2WzVtpGLcJKaRe1iAul7UaLILeXStvgPLzC8e9f8F8q7fCHX2sRgts1Prz6Ox+i+lh43xTeu3/fRCtfeNTbeWf1v+tP+4NK/Cv1Tau0k51B0lbqm+/Kuxf8qZ/4h7y2r/H9o/7a/nn7Ksf/NU57Dvsvlv6PxX8Ral68/wP9eq2FcfL+HN84Z9xUTv80nlc4M/x83Pj4srxXPh93pX+Xbas29VfaNb3SKUdkUNKNdiT89Fq7nJVytTmiG6V8q13TKJ1eaZf1DK/l55zy1f9Gu7ZV4kjPsfibDW9nduFTvtHQtprONhpyqylhd5rOrjTkRlPaOL92jv19eVfid72mxZWGRPwbDWZvNKR+Zv99cOrfaOi7Uv/k7etbmxmHifZ/X75R8b/R0Hv/T1Ep3Wi3aJWWnJHamc3MWnlT+NgqdZTHvtJuPHM7Om9mduW3Xp6ZuPLg5U+V+hvtltUOSv2tdt0KjXmqrl0qxwt1KSsPSV3sleORurQodgP/ufNJXbtQjsfOj9y/8vEp3815Ms3Ytb1yh3+vXHmHP3zQnk+Vr5W6c3UTmnBQ13VK8UTdxBF/rK5bK0U4mu478PHAf8R/qw7Nau3jiD9S1xP/TF16iR8VPqEZt+rQpPhP7r84do5mfI0P6hadUnOiru4fmpP2IYVo39Lb/2Z+WvyH6u/7N3j/Lk+ViT9sS/+vyP+xuspXZ2V85Adl+nvl+c8L5d1a3er8kQ/TUz4cPfJ0r7znqeQfvrxQjh+oM57UL1s05kYjWuIuakRbtDca0Rp3dxrpiO72Ke9uNGqrdHerEc1p9uj+KuXnvKd85RwR2MS/KfH72xnXU4426m81mKaMGkxz3mjQoOnuRsM0aOqx0Xxv4dnLu3+q/mjCqAFtR32mKW80oP3Mrjy9wL1+NCXlTTPelDhmuz/a9VVOvb5/tIz2TWjOqAHNafYhR3PCqd/7hf7Z+zunH417/5MH8oHmJP/kiXyQd/JTOeNiz8mb5588W/nqP5TxMOeMj9E544zxZPHvyjhjvNX4jLv2VrtpQmP+p19wlYym6EJWGoM6NMnOtwPbhdLuSl2UktlzHm2GNf/38rk/9UldXCkNbGv86PaM72RaZdpeadFETWYvNW2lRbPUZJq109t484o/PGsR15q2WYtm7XavaXupRdO+wrsXOPuH/1s47T1sX+vto340+iFv3sipH3/vXzSz5bMp+UXzWj4OOdcCV+qQfMY9/2j+gfzP+Wz8vMMXT8dP5XYtc+3xg5bNUm3qNhopcHajMQelfKcRDXl2qzGhMbDbwlOjlG4P7EN+YE/V3mjEH7vtlJbE72b28zxPd6YZ8zkar1Gxe+VzZpZeebrVgDQw3s7s78vvNHQL5eWthmlR6jMbjdbN7L8vfquh75WXNxpGb5/ZGw2jt+878055ib/3X+/9jxQgH2ZvNKIB9zYz2wEfGqWG8mjSG41De2A3Si0cDeq8vZ2VrxxNequReJRfNkorynPGRmOu1cbhWC2aLazVss42rtQyUMMHakNSGia1HEnwwBG1VtsulMLPnY9qGWh7vlLb4g+flMZRbcc625HaQPy12m7Od8/wlVK4UMupadyp4+IjHKlTr2lYqeuXmsKfq4MPaMLOeadpWKvrV87H9/N8wDPx1+oWa03h7DH+Yl7/nLt/5dV/eVT881DqX7r/nh+/wH3/l/BzdXlb/Ffevux89RpnARv/h9KeldfPxdu4UifWMS/UpgelcVDLii35YZ2U/IfK7wsnb3AbH4yDszI+cuV1/DA+VmpX587vynhZOWciMn6hFH6gNt2V8WH1r73+tXqxjrnXkPcaEcftvWvKUEZwhxZAg8LRCPeuCeFoyjuNqJ89x0ZTVn80JPzO/eHTjFf/Z/go5e7WtFK+vTNNmfs701L5Npj2Kvag57n0PE8yfy72LJ77p6HYGY7mTG4f8uzc/bNztsQjLv7ZOXHZ/z33+NRj5Q85/sE0pfHJuTz+JOdT8X+HV/9nOP1pmjKUPJC/0fNDjdjMXOSPPJn9Eh9nnHHhGpJxYf5wHzeMD9OYs/jYjDfGnfEy/ti/GEeOlE5xx3m9V+SISY3i7ndq060iM5xx/t45j87vnuGUDzNO/FZxx99bLy/n924f8uz8QYGrttwqMJNNvk1SGL5SN23L31OnwEw6sV3b6sH7eSr+affUP9X4lY/O69/rlr9/pS79sZx62N8at+4/+0V859aulTprJ/1Au+G5+L/I6adZv1k/HqmbHrx/8wv9f+9cL/A758E546eOD/JdefTxMueMg1v3b5z3B+Nvx1hBM66Uzu41so6YHlxD3rsmxO6Uzu5cE97P7FZpmttokrldee+a1XnbzzTmg0akwV5z3muc8Tw9aGgWymdc7aLxqs3MhAa7d46NJpzbb+DjvPxCGZvlM+pDY7bfxV6+UN73f3qNe31o2sVd0ZjU36N5sZ3v7b7Ut7df4mjWW4/3YPGsv01D3rvGRFP2StODxt7zcciHXqmp5Zn50Jhzm2Wuuf0SR6MyU6IxHzTaOip2W2bQ7giNieZDQ3yqlgV1NIdpymXRlNOinPvDZ0VTTju1Gc2AFmGgLdVmNOcLfFyq7WaadNyqRTybf6sEpyP2mnTGUZnmj6b8uWvOwif8KzdNea6Wk8/4YPHfxFmwt/rRpOdq0Zz48/d5/Fw06z7+S5xlpvG+7Bf+Nb6KJmzfxGf1v+O/LftHu5+N/xLnJomiKa198v5nIhoXaqvmNM1I3g+4acoLtXvu+Wcc0H97flfGA+PC9s/HR+XpVmnycRPsytvrR3N+YDOpXZOoQWNy7p+Ubl0zMoL5DfX2QeMwKrXbGeeq6aFoCeNoBGzKV3/XGpV3BxybmxdqfOrnZofqb7bzcbQZYVLRhBPaqr3nkkf59l7TNCm3D5oydtCem135/Yzn4l95wh/u8dGG2GlUvn3QNHn9aE2L/xIvmm6q/vjhTxziTZUnt1/h7BftYz/n/uyn2Ye8aM5Snv1+gdOP9Bc/BND/5IH+Zp2R/uemFmzyvueMA+emObGHwk1TUn7GGQ9zbrZzxpnZHp9x9oS7PU1oTLQBWuArtenGz/loQWbKuq0czclIr39ni43WwB/NSbzn+JcHvMahPFoGPtOcXk+YVmoyWutLNeleYVqrSY3CsCzbaTnjW5Xycz73373AJ49fOZqPuK2Xd55f4mjNL9Xk0csf+qMZ4dPbeG1fbkp508Iz/3c4mhOeFOiPd/j9jK/UWH5q/6P56Hf6H81Z81c5NnmFk6f69zo+Kif/jINDjo0/nHFU/eoWf8bdnDNjogmaUemUc73PkGZvNfajUrN75P2g1Gw1NlMpb/wttsffl8dGixAfDfsyz81WUxyVzx40daNy3GpqJrenA/tPxFvqu9fElvr+f9udt492Uj/tpv17+3ty+pH+7Lz/6XfySR7Iv9lozPfxefnpGf+3csaNjzfGXa2fM3Q3sdRYjrAUFjZDpKlXwwp/+JkafgmatnYEGkd7TJRDQ3ymhqkZzs0d+AcWaHs1rHc94WgWOP69GhVNWfzv1ZjmeYajGafCR/xRkVOnJi80hp+rQURMd2r4L+ONRo9f+PACXxb/fMAz8dn/1dP4/H1f/5y7f+XVX2uN4UxN3nn97r/nRy9w3/8MP1ejB2/PYfsqv3+BH7t/5fP979SIdc4LNUITkg/PD1tsX8fcc9Ocs/Hh65hNRjNS3vPPODC7rHM2+aaMl8rtBxbKs855ocY056z+VMZXyzqm2q0SA+xmp4S24J46s4P9/MSM+cg5QrhLMCnd8POk3K7+z/GtEhq0xscfTTn3R+vs+VYJrQNnHZMjPI/KN1xYoNl2RRPeSNOI5ttqQpPdIPzRZNhZ2Tia9DmeCkf7zblpSsrD0ayVe/17TvxnuGnKbfGDm+bEdv93OJpvzn3/qZf9Zz/gtIv2mSbGlnPfv3f43N/7jf6jH+lPNCX9Sz83W1vktv4nD+SHvBr3fDIuyA95pHzljAMr7/lHg76PM6728UMZV4y3Gh/NGXemeaOmBedzxalXRHsk7KA4fanIud9seFfKsZaJ1jB+q8jap/lXjp1nfB4f7QDH/wtFtMc+vscxOzlHU6L10FrMVGw5ctFSX6jJD24fcrTcWzialHiH/mjFz23Ge54Pztk+5/8aR6sSn3qe82e/2H/a8Ryn3W/h9FPtt7qlP++9f9ML/X/nXLP8zvNz6/nNM17zT74rx9//vh8/xLlx/+D1t7PxxxlxqyhGbEQzcncyI3ZQipzz53blU+GmMeFvsFndb5LSKXc3T0rcQTL3N/uQY3PnCxprpykm5VO0kdtordOd20PRXn+0PWjqUqmvpb6dptbrY0v9e/s1Ph6UP/T3/ace2vckPvvh3DTln8pGq3t9neeTvND/Pfa25AmbPNH/5Glvv8S5i31W3u5qf8FmnBn38cU4e87uEgtivWLuFMPPFDNH0INibhRDV7ZTq9jCPy18un+Xmz98UjzkzMLGPyucK0D+sfixHFEiPnwss2jligoJTYSm/OxRU2Y0F39Hk805mu/WNWfl7cz/gBPH/D1ejmZ3udGS34fFrXQcwWhONJ/7U87qL+X3PG81TjdqTGOe25FfbNeExtk/9/f6Gh3wJ+1j/6umRHM+177K0ZTe7n3/4H+i0TQlP5rAoyb6n3/Ij04Uw4WiOIP53/cc+7TwzBkSezY+zH/GGS9zbnblzJSH/uzNuWL4QDFvPH5Qq2ZQCkVzpVbKjGKzWeNKynPeoflG7gpUvuF30clt9zdudw2+n5uGm8V3TZiq/5zHoWjKDc//UD/2pLzhXkXqH4qWm3O02LM8e/mnPKVJ02an6z6pae6U06XCplXujw/iV/+kvOHextI/piWtfjgXbFn5nv19zh40TUn5fub/pDx8Ur5/bF8as8Y7adtntbQXTXn3yE1z3tX63seZMeGl/sSMTX7RrPfS3h6SMrqv8kHK6MqutIcbe7LdN1H6H81ZOPFGu/HnkWPP+aBU49sZipurpYzuNZv9yYriCMiS0hc2YovNjZXoTbaVf27awP6eG+e+NX/4LXf62oxa/CvnGYzKyxH5JL6S87vir8f6mTGZiQP++U4hE5+ZlJk4KmS28N8q5nsFZucnvPrDt2UGdt7s/ZcK+TOFfKaQP+WKSRt77COW2T4PHn/7JH7xZ0atfDDO1XjIvy1/t/2hXuov/N39K9ziZOLRrsct+638W8vu8+279/iT98e8f2j/nfcf/VT6x/rf+hnNR79/zmAo+ba8M/N5/i2v9D+ccVHzyhZ/8g4nz4ccu3LGWR1XJX9lfG18/DkXMyYaMCTpdFRKiUvdp/ZY7UnMLNzujCYt5auNf+Xohue4xyceVz+nQ6lvbz/DmVm4EkcbnY3K2DuuLLPbPN7LUVt5tSun/JwnTcOk65DVxFEd7Q6DckgKkbOFdN30GuLP1cfPlcOkHFgJSMrLQZmZhvrNHpXGpHE3atsmNctRPfYwaheTxSeu+TMTLMd3/J+NN0zahqwujhpC1mWctIhJizhpFbJ27FONN2Rlzl7MZMRnJnpiV+7175gxR/PXksc8aD93rSdpxczl9gJ7xs2e88nLT8V/gc1jJ/hPpjlLPHi1J6Vt5V4fNmfoGt9sfh3KapkdooJkyoMjhHN+K+mn5QjKd085+jN3kn6GUrFzQMwzf+P9I+fKm4yrHoFs8f+0+HMFx5G559SPP3xUSDcKtgdt2XIFnTsFfSpuzAp5o2D/wIMCs41658xQ+POPc2aDjCbAX7qaznV3JX3+hfS7h0FXd1/pbHWmT5edPvwo6mzRap2XWugzTTxAS315afEjj++hi1Bp3Pl01ShddrqkD5tW47pR99CpHxotzltNOdoDfUErBTE7M1M2+/ZZP46NdB813be6W0T94bbVSYr6QdsqHkeFjvYdKehcQZwhsGftMxt+piDOMI/xrR8T5Y8ldJ2YKenvw/4/cc5M53kjP+TRyp9KulDM8OrPuAh2dKNJC79Be3l8tnC2Z4WLmXLOa3zug+BKiSl4w++kto7jts3qXO+7zb15mXWeA17tOU+yOhl/XNlxCtjAU7ET9Xl8ODP1CzzHSZnfiDfcW8gRjy3lDeMrFxuNanxu+/ij/IyHOOk4SNsofZOlv70e9D+++FL/+zcf6uubRul+VLNM+ul61E+3D/oXf/53OslHajcLG88c4SUeZ7GsyEyWsm5v7rX9+ivdXH2l3fiR7rqFHu6/0nL7lXa7j9TrVMvjE+u/zPF8J+V1Vj6fykx6PSkvOZXdKX37pa5uf6/t4lzp7krDeKbL7lLj9JH6Hx4rj6H41/aznntH/3j7zZ61n5neuPffKNmYJJ/0/5Cku1l+dpJcUxpnJhye455PHpc17uNj7s94eZUTfzb+RqYpG7F1pNcRS+bRHEc+wutIr9tkmidy5NkRUP9etzNej7jMcUl8/r/yk8cjZs85gsjcb+1qEQ1ps4LpLrQXMyYz5f9VyKemqUJmpuTvbCn/Pk78Ira/2Uj//X9l/d0Xky6vs9K6k04/05SkX35zppvxRidROv2rnU7yb7XKJx4ftf4HtTrTYmo0XEV9e9no/irpPmctTrPiXVTaJH0bs7ZT0nIT9dGq7j9a9Xc+q7HfUWGMCpdR6duob6+SbkPWQpNik5VWk77ZZrto+cF1q7hgprx6T/vhXzn3+Pv+o384KpjpX+r/2xn3vD3JDzPhjSz/+/FDv5J/ZtgZf3Z8MKtwpjx6If8PxEJHZemUu6nRAOgiNKDb3JFivByRwuZqybhd9bj9Gp/FM435Bhstxf7ErEx92NSPxjTbNZTZrrXQWO/h/Gp11Uh/OB70f25+o/91Oemb8TO7TUv8j/M7zZL09U76b7+R/uelNBxPElrO7tAp7VebldJWm2//VtPl36j8ZBGVtVMOv1TmUjNG5WlQ2vyNrqe/1RS2yi0aODE9arxOuolZu7M7Xaa/0eXmf9pVOaI3q1EOQTk0CpGnWLe63PxSV7zhgvbTzqopT73de3vOWXf1fqQ/OXOZXfbhHZtxMOfv2J7/ctVsMzXXGDYu6B/eLeT12Xgx28eZcY9vGt/HAeWr3XJVbvqvkfQTyc79ZIZ/mVc4Avhv+E8ltIPpiAPOVbrxk5JU83F/izHjFnvmbzbnfOKjffjfI7dZUGjKn5o24hgpf3NtZZoKTfkzBa2dobkq578feWlPEGenz6+Stt/6QEQWscvXbp/ZyUCXX2dtft1rvf2ZOq2s/bX+lIMu+ZfhEbPCKWcCqb1OOslZjdvMnJtdVtpkBZ5CVWDlUI33JeugK32m69DpUvdqwq90qh3DUhqyuk3SKUtKSvpmzLrZrHWUfqYGLc5ZgnZb+/uZ5py3/9j7r9v3zz6/1t/0O/1PHuj7x/4v/43m/CnPuTyOCzrL8kyAyllvnPl7+/accTTn+7rQnIw/xknxbxUYfJ4Qrjn4H84kqA+l3Jzj945dy3vcd/gsPv4cqBbfyz+xeZZzxtmfuc3+mh1k10jEmyTds7/EC25X7vadpHU59gIpfui0ufnU7uG0az32ef4/t6lqI2krCWmW5vUt5g6z/6aMdfDsb/wneSMH7O+VlBdSE6SjSRqupcxBQoXexaWji/W4e/cK+qWy/lEpSF2DpNva/mrP2j/neM1t+uuJLQmNyL/Wn38fdvD41lGz+tw2jcmpnJ4Kv1FmxgrlyLRTOr1kduUn5VTPyOSUsN+O7g/nrzPO1E1Kw6+V7WrtkGMPL3JkRA6cGv+gHE5NVpS/lVNDWZKB/145nJVTv/k8w+2MwP6UY/MU7U+e5gObxLkdOumiCTo92em+/bVWXOlabPYpKYasC54kVdBvA2sZUWqDxnXU3Y5r76jTNmhYcToPtj55Sm+HrNuY1JfpX0O410P4Ukdh1G270rD4WLvdld1jc9oFDYtGN7dBi02jbhm1yg+60y+10A9Lf4c75XD1nvbfKIfrJ/23z59l60aCv5ifzYzP805Pkj/4RpmZ88m4qOPgkLtk3I+vKync+Pgr8aNd/HDUnDSKvV+csKh3Emd25cxW/Bz1XW3izeLHg/hmP8NZGmF5I0SFk0ahrXZwO5TllvgG+xSdFhSvGp2MEtc5f/mJdFRnPQ7W+b+Yba/zi8/0s4uVVk3UcY52syt6z66KIvpvpXzxqXTeiyv+wANkrEJwowm/ULH223ZqT/6xTvQPFa4WChNnKS6EvD0xqLk41sk5txry8xcXf7n4+5aYoeulk79Sbv9CEktW3v7W208/sPz0ju39Rz/Sn633P+3gYpQ3WZCfajMOyP8Tm7x7ec6klGccMB6+s+3x9/G8frMbxdaEmD24YOcQjn1bDrIM/ZmSHQH8BMmR4eVYMGWHBGeGZQF+zrERa879J87iX+PDP1Hiqgxu5y/iV848Bl+XBWHbA2Z2BPJoFwNZnyhrVWw7auHMZKNsefYFbgu+6MBW+uxn0j//c+nDbqeYfillzq+/UkxXOg2/0scX9/pnnyZ99IOk82ay1YSy6I7W+olG9dq0o3SWdXoRFJpWOe2UN7+xewLH0OqavmiiTi4mpfOkTTtx85gtPJcLu9IutaPiSdYJg4p5PAQNodWGh8Ouf6M2jrq4aHT2w0HxbCVF2t8q8wMB/WDtPbS5eKI/yKD3H8tdpmno38bzjX6o/c/eHXn/x6ecixOWf+xa4M9Kni1/nn87A+CPZoUjBX3c7McPHE3K+Aiz+GS/xl/6ArtpyqYcORwBrjEj/W8/+aEh4Rzp3LrGTyTSniO89tx/ctrzWr4t8Yln5ef+xKuc8kWzxp4zVVOO8qtWYYGg53GHqHAnhUVJIjNQuGsObDiTILe0PXJO3s0kHV/y27P0Tz+VukXQf/9Nq81t1O221Vkb9Q/OW/3VX0T9k48bLWNUuiz1488FTLgt9XPL3EXmga6/1B8uqPBrhcuskD61gdpenOqD41FLfrbIUdN++asug7W2VKTbxl4OdnL+qbbdnbZ35wrbTZmB27Wai7/S+enHSvpW/ZC1fajttx/vOBN6+7GD295fQ1S48f6jP11T2kxHPoco3bblDEl+ENSDykxodpSGypsZ5wKI8uhUnzmJt/eHY8/5QXzGG4vK5s+MzCO99nOL/yRZZzaOiMAyx6/tLbp2hNiR4j9N2hHDXs+4jfQ530nxa/evR0LlHDH4/8realuOQI6UyjnC8P+98aIhWepgpmTGRDvulOPvXFO5ljTOjPkWvjX/EM/0gw+u9M9/fKaffDLq/r7T3d0nOlrt9IPloE9+nNQteNtG0iaOWtlyBvEflOMXyuHC6mOPYzfo/KjTol+qv/gzDXetunWwG01OllHjjlJ1xn9mS/ubpHgx6qKPWq4m9btGw9Fa3fpjJU6Xi9F+Yk26VY5oynNvL/blzL6Zce+3ff9R940Ur5TQ3JZv7/86Y4XNjNe8kDef0QKzzqbMfO/4cyvdC7zOuOGq+Ifyg4P9JP4k/zxp6rch6dhnup3/BHXMDZ5R2jKTNZLZzfe0o/bxiYeGmcc32+ufc2bGh9a0TTjhR6qocF/tzu3OtFA4ec5uFO4P+AM3MTRqUqd1jlpNnRaLRj/5SafFGHR/Kw0ojLbT0RD18G2rxVHUlvpZBOc2rohm4+UPvNup1Q3ac2p1npZa6R9rcXGq7YfXWgyn2t5eq02nmqYr005280mDf2szlcXb20HtdKKjeKLV2ab49x9rcXyibXOtdoiayFfL2aFz/2r3igNnB+x4wLF5qQQak9sYo4T/Lkq0Z4VduNnrKC1n3GxmOi+/bgrfNsX/O9sen3jsD/nn1YPVNo3JbU9os8xp4sRuXLUjm9vsIU94uQ2MRy1y9tvb7LY4tDr+R8rcOj/n3AjKInFGUxzZbVdP4sNZTjWOpiyPbrA4beW4TYsVvfxnmtCczU6Txzf1wm1ge74sHD3Fe4PYUn7Pea+j++PHFbU6BEkAABBsSURBVDW38qvRlD/hl3dN4e+U870tju/jh045f6JJi3IbHDP3bP8Ebz5RYkt8Lnpq/VZfb5x7IO22M/qVZ9iJY/u/KPFD+7h/9iIcfxhOvbe/eaF9yxmn3cSft3/9yK0/5/tPfxduebB8zDn5OTJ/rh3stkjvX8uz5Qv+sS2llfHi44M82fhxzjgzex6f+k98/HBNWMZjLLctNYrMvtvZrfRovi16z2+N33NmJsp3j3yKM/8Dzm1fc7638ffbyqbw6D/ndoR3ariSvBa3jpbb1qZG4bpTwwzBja9oyDdxrlq5nazMLLY1/yg7uwxBTep1Mka1V2VGtPJoSuKzpTwzJ+2nXOp0mpnpZNp8z6+8nNUXuAawBfU9Z/+JY/FqfLdpF/60E45mpH7OGGZ7+/fcVnNKP7yP04/GyZfnhf5GOZFf8oRNXuaccWE8OPf8Mw6sfOU+Xhg35l9t5+hHxpNxzpDYfRl3xGeFAD5wJWGPVvD4w6/tLbj7RysY2Zz3GcH82/xKKfJmWmweKvLtO7zc9vYu/6W9Vbf4+0NMvIfT/LmN//fOy21x9tBSZAZkZntQbr6yN6TZjbh2JNaZj+3W+Xm5UfcJZ2Z6jRP/S3sbR6mPmYy4PqOFe+Xmc3uy8PvxW+Xm2/f4zzn76zO9bbHhl75/r/F5vxCH8hvl5sr7j/70h8J4T6bleKPUXM3yM+fk+XrGd0rkbZ9/8gW/fs/4OOToaeLW8XWp1Nw8jj/WiO1hNK6cjnvFjlHMjbjcYuW2PXpRuT+Uxi1yxv0htjfZixKfeKH6+0NIgfqe4S1X4Dzu2SocL9Rgj+Vx0WJzhbxQExvn2P3b7eagfOPxa7w99/pf49H98WN/icP+4Gf2a7yWP/BHU87jvdemnw7Le/30I/1pt9B5HsiH2QtF8oDNOCC/5GlvL+x2yGJ7/si78ffZnV2jWDzG2T6ejzPGW62PcceM3nJDCI9bMgNmfzzTZlA+CvCRUj4uj2NWzmO3piF59BN+VDhHIP7GefyXF8BW/mBX+YX746GsmqJJ8rr4s7Jn/v54KB8pMM26Um4exMpf5r0/bHn8FK2TP9YkZlQ4mmbrmhIbTfoGHtCMM3/W/Cx+9UcbUt9h/a3HR1vOePUXmvRjTWhGeN3/PUczwtGMc84M96CJ/bL9h8/2zzQzNpqS9r3G49P41n/4r7x/w9P+r4/nkhfrf1ZvyKvnhzVrxgt5J7/k2WzPv83EDzNe/Z3bmRb/4+Ifc3lcvObfZlA0PwcJj8eaZuzVcEXM46JmZzVoj9S7vVCzQxO8ximPRqn+lG8Vr/HniDj0f44/+tvjq7ym72qhZmgVzL9oQtNeHq9wNBnxgmnGoklLfU/5S/4eH+13lV1TLtSMXj9b4qM1/yQczTeP7/uPpryqmpJ2ozm9HZRHaxtH8z7HD/19/+lH8stqHfkhT/iTF/JDnsyu3PP9Ise/L+PC/Gv5Q380Z9n/Un7G2R/G3TXjpoy/dhCvGbrXGPlS2FYj32Vpdxq50mq/1hiZMQeNjOTKeaWIlfu9RjQnr5DhHep7jr1Vap1z1Wv+D6Vc9G37lcZ4bkfMiGbh5UrEicTHv/Ci9XicwWcSm6G4daxqQtdUxplhXXO+lz8ot1+4Zjv0Zwa8V25/qyl88Dgj7uO/hd8pt9+8x//2PZz9uVFu0ZQX3h5ehED7a/te45uZP/vL6w9r/xF/o9Revqf/r2e85muenyul9rrk3/J7mP8Z348XHzc2Xr4tH6GIJz7eGHd1XLG9U4y8epgrq6OVvfLaXnrEuf6I1wdy5blwPrN53HbOX7WJR3x/CRda5i22acqlvcIkHK9cYy7tlSSPNloODVV51Zxz+wVumnHmb/byMd53tU1jLl1Trkqc8bvai5k/mtO1Ne2z+HP7O3J+NWN/0JT0P3ngJViHNnma82pzrUx5xgX5J++Mj7fajLN5ecbZ3i6vbTS7YebltXP2+MSPNOqovDiTGS77a+p46ZbxH2s0TclrCgfnXK1j8/gFHM3orzQ2f39NIe9AqtxepT2LbzaaE3++AcmrtZ2jiXjtnmnKH5s2yu2dr2P66wiZCcQ66UdlnZHypjkrZ1t5edHpnnPVa+XRrB9pCs5NUxK31o/mJP5LHM2JP49QUR+alBnK/W0dEt68jbNfeb7/aFLqj+5/yNGk8FBmxnfav1LOPy796Ptn+aWf6W/TnD/WiGYkH6Yp/XWUZqM54ayHMy48//VV1aZJ4bmMhzlnfFTOODLb82tnUl5biWb9URlnxKel9iprNOVV5jVG5YjgXH+1VIu24EWble949ctSLb8uXK3U7lgLw6Z8VosmtfIvcfxXaseD+KPXX/1nPPhrEtF0aA+z7cGvlVo0J5z1vDfx8IJ/0ZQt2o54pimXZWu2c7Tls7xozvZVziMUz8Wv/s5pF/1LOylvmjOrZR3T7EOO5oQzg3q/PPF3zjqmc8sv/Uw+6Hf8x+i252fPc+GMA/JN3i0++Z/5P8sp7/GNU97jM26YgRl3tv/Y7H+j5l/+h3//i9AuNIXfSQ2vMriX+J4Ndymw5akls7+ymxcn7kjlezXG+W6Elwuv8S/srtiJ50EavqLgW7OJVznxHjmfEKT+BG+5Wr+VeBU29wCy5e1TfPJPcD4piP3HcOIuPP5CiafeLP7nHv99nE8OPscbJeH/Fv7c/vOUFO0rnzR8t32vcT7F+KXlzfqz7bXPg/Uvv3gVvv/7k/wc8sP8S5Pln/Hy3PiofD5efNzYeEs+/hrzD+0KjclnMqrG5OMAvLq6Vzw6sldgP2pQXonNqjyPVlK+vCL7qf0SR7MQD752/7n9Am87hXGtDm10dKSu8Zfn83DC0bHbfB4Ee31gv4FH/6hA9Td7rS4Q70jdd7Xx42X8+OH/veyV+x+XdvHRA9pN+9jPvf1dOZ+jYQYu/WT5II/2eRzyeWSv6C6vPq+2c9OQc8748DwyHozP7Rc448zK+/hinJlmxUZj+scpGlvPvNXIry+Zc71/TsXWLT8smpLPrVSOdkCTmqb8UdGEfG7DNCfaxD/HYZrSOR8fMH5XOJqG9Ss0hWnKGr9ybOes17U3GuKgnPmMylA+r8Ldd/lHGvjtms+DcE/iE46mfB9HU/5IA5py7k8cs+E/Fl/AecL39aM5n+HVHz84mpJ4+LF/7/D4PGe/bP9e4LTbeHjef895TMf7jfrpR/pTS9d02T74ZJ9B4cNj5Jl8kRfTfHDPC9w05YyT5z2vn0uZc391tmlOrlV8fNg66IcaGWdoWMYd489Wg+41qPdP9vHVilsekuITbP4pvdu2fMJvGMon/OBh9sk149wPe8irf+OfABzLp/lupS6s7D05XVgqcf8hDRuH8vcnnP0pfBpG+8TcdCP7LPU08Em9laabVouQ9ZQvNQ188m6t6YbPE/Pmjbl/5fjDD/1XsvgBfz5PreJvtn/Kj/rN5tN3+E9ufxd+pOnmOX/qp521fvY/lXbTfj7V9yZe4x/6P8bnrS0dE8CY7SG7YpMf7LWKnZ7hPLJGfvCvnHz6px35BODcn/HEi3r3HHsWn4ftGHfGGX9By7hW8y//47/7RWiXmmLRakUjNJri71jldI3ZaYpFaxUNAv/KHq4q9ls5GqNoximimXiCHLv6V078wosm4muz1N/ZZ6tNa0XXfFVrcpfBXlu2Sn8SjnalXr5WO4/fePw/ltOeefyqbWv8Q16182s8+v5V/8P+QzOi6dGE5B3NuCl5MLtyz8c7vGpGNKGPG9OktTzPNXHNUeNzzeJ5tvJPNSX5fLymKfsT4/aknNvXx/YpPrtK51y/Pio2GsTsE7fRGgvFWh6NKsq/laNFannuITz0n/Gm8M7r75qFfcgKrUX9aK/IZ5s9Hh/hLPYbeTzwj+4fyv7xeWyLZ/apfcz10T45sE/VUY79wW99cmB/F+77TzuJR7uIRzvN/q6cfJ3I+hEN7PEsD+SXfiV/xCcfrefH7PKJxqfc8884sPKH/i9w8rgvXz4BaOOt9fLw8Ui9aUw+C816UvqhRqZYPtPLuZ6Pm/L7tWlM56xH8ZnfsC0fO83+WWh+I8UfbcJHU9/hSSmhWZfF3+LzUVXiU3/lC7epv3yWeOo24s7/KX9omtLswKsI/bPH3Y0GntA13utdvpnx7iknDvFDKP6hcu6pJD4vh4XzSAT1c1819guccnD88Kec2by36MMS5y28tq/uH1+1NP/g8bz9e947lyb6g3s5rX5vH+/0wJ9+NO79Sx7of0615IdTOzZ5of+Nk6dl4VxbkH/yzsduybOVX5X8Mw7e4ZR3zjhjPFl8NC3XNOR5XfxtXfOW3kNj/udf8PnjdNeq5wNUw6SenwjveLVV0ZTF5niqfGXfCuzRGkPw8nA0J/7PcR7PP/QvnxUu5V/hN9Eed93vn9lFk5j/nqeyP38MRwvfqLSD9pkdxY3WvOen2HO+VrqhH17jtD+/x7/ypRL7Tx6s/hqfj87if8jZX+p/nz/7m+09Qrb/d563Ha+DIP+V8zg5+Z9z8jnnnl/7vDTj5NB/zufxk70Ls8SnfXwOPKpn4M7iL+MSjflvfyG+XBa/sleXJPudFg3D77F8jcC38UueO3IbDcfvsawvvsIFL5ovsw4p7g3k025XyqYJr5VZp2w+13N84qm3ttFompH3uxVNNsYr036j8dY537Gg/EJ/HO81xssShzcTtMT/bdma/RLvND7L2X/8X+N8e61o2bL/C48XvX3flweNptnxL1p94pkh7nngXs2Op3i/UI58jeRama8xP8fJm+Cef/JGfjvuEvqy5NHGw4ybfch9fPH5ceM8SfCVsttql2r+1b/+618su7XSOtrVHzPlgqv0NVe95Wp9wWee11zFcvUUVWx4uZp6L78LXr7GD1p0K6WV+8P5TPTqGV6PXPiaI7PsT4//mhna7b7425F4G9X3JX6xg/qXOKcoZobK65G7WCutmscjeUG8MLNf4MmP/OVaadmo39srpWWY2e/jUf2S8q36aaF0H9SvlkrLqH5aKt1H9avXOPHn/pSP6sel0gPxVkqLVgu3F2bHR3t9wM2OWgxLpW3QYr0u/sNCaRu1WC+VFk3hD9juDzf7kOPv5fGv9Q8ri7dc8VnoxZV23M0z3WiXH5T6jXac66cfaEfiFtfON9qhLRavccrz/R/8F0o99k5pwp8X0eP/Gk/FH23k/hP+qA/bn6yJ+GgvbLTcnKM538LRlHN/4tA+8/+hvT2o2PP4cD6lAuc+a2zn1Z+/wykHZ7/Zvz1vnOsZTnu6sv/sB/v3xB/7rTw/9ef5I/oTiUb/oO3JB+uI7B95gpM341Ph5G3PyeOcU57xgz/jA3vp/ryU1cfNS5z6GXeMv+jjTx0a869/sTSNGbVghtqxfsdMgsKU0o432hbNsGCG2rH+hs3qFJrlkOOP5nDOOp9rVos/wGf+xrG9/jlnnbPGZ6Zmhrb6WQdjxp3t3xPOTAp/zf+Qe/vCka2jsk7JW3L3Zw72m/oD9Te2jvk8/1P400/Uz7op7fG8WP3Ex0azfU9Of5s/66blmsLyRHxuqphzO3PV+skT+cVm/yQbF5z5rH/mvGjKdznxKc+7M6lvXn+0dcz/B8UfJyWy3cJIAAAAAElFTkSuQmCC" alt="" />

2.加入相关文件

下来我们将素材和相关的库导入项目当中,当中,react-native-viewpager的加入方法例如以下:

npm i -d react-native-viewpager --save

然后在project的images目录中创建banner目录,当中放入4个jpg文件:

接着,我们在HomePage类的定义前。创建一个数组常量,用于存放图片:

const BANNER_IMGS = [
require('../images/banner/1.jpg'),
require('../images/banner/2.jpg'),
require('../images/banner/3.jpg'),
require('../images/banner/4.jpg')
];

经过这么几个简单的步骤。我们对图片的引入也就完毕了。下来须要构建轮播图控件的布局。

3.构建ViewPager

经过分析,我们能够看到。首页轮播图的样式十分简单,仅仅须要指定高度,而水平方向,利用flex:1进行拉伸

但因为react-native-viewpager作者在构建这个控件的时候,应该是用到一些变量进行控制,并提供了一种方法。用于创建图片数据源,所以,假设须要使用react-native-viewpager必须在构造函数中进行初始化,详细代码例如以下:

    constructor(props) {
super(props);
// 用于构建DataSource对象
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
// 实际的DataSources存放在state中
this.state = {
dataSource: dataSource.cloneWithPages(BANNER_IMGS)
}
}

而在render函数中,ViewPager的使用也是相当简单的。详细写法例如以下:

                <ViewPager
style={{height:130}}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
isLoop={true}
autoPlay={true}/>

当中:

style:样式,和其它控件设置方式相似

dataSource:即在构造函数中利用dataSource对象和图片数组常量,创建的真实dataSource

renderPage:方法类型,返回一段JSX。用于指定ViewPager每页的内容,该方法写法例如以下,切忌依据WebStorm的提示加上static!:

    _renderPage(data, pageID) {
return (
<Image
source={data}
style={styles.page}/>
);
}

isLoop:是否循环播放。依照演示样例代码设置就可以

autoPlay:是否自己主动播放,依照演示样例代码设置就可以

locked: 设置为true即禁用ViewPager的点击

onChangePage: 页面切换的回调函数

renderPageIndicator: 自己定义指示器样式的渲染

animation:假设觉得原始的效果不惬意,能够在这个字段中设置一个函数,自己定义动画效果

当然,要记得给ViewPager和当中的item加入样式:

const styles = StyleSheet.create({
page: {
flex: 1,
height: 130,
resizeMode: 'stretch'
}
});

保存一下代码。在模拟器上看看效果吧

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

project源代码及资源文件:https://github.com/yuanguozheng/JdApp

本次Commit:https://github.com/yuanguozheng/JdApp/commit/2d1741bef1c7908c9e0d2f52c23210e8de2fcc7a

转载请注明出处:http://blog.csdn.net/yuanguozhengjust/article/details/50556700

React Native布局实践:开发京东client首页(三)——轮播图的实现的更多相关文章

  1. React Native入门——布局实践:开发京东client首页(一)

    有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...

  2. 微信小程序从零开始开发步骤(五)轮播图

    上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. Swiper是滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常 ...

  3. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  4. Luffy之Xadmin以及首页搭建(轮播图,导航)

    1. 首页 1.1 轮播图 admin站点配置支持图片上传 pip install Pillow 默认情况下,Django会将上传的图片保存在本地服务器上,需要配置保存的路径.我们可以将上传的文件保存 ...

  5. 京东商城首页jquery轮播特效

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  6. 李洪强iOS开发之使用CycleScrollView实现轮播图

    01 导入头文件,并且定义CycleScrollView属性 02 初始化,设置frame并且添加到collectionView上 03 调用方法并且设置轮播的图片

  7. 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  8. React Native – 使用 JavaScript 开发原生应用

    前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...

  9. 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

随机推荐

  1. Laravel 5.4.36 session 发现

    由于Laravel session机制完全脱离了PHP自带的session机制  因此对于php.ini 配置session对Laravel  是不会产生影响 代码路径:   vendor/larav ...

  2. activiti 表——介绍

    Activiti 用到的表都是act_开头 下面分别来介绍下 activiti 所用到的表: Act_RE_* 表示 RepositoryService接口所操作的表:包含了流程定义信息 .流程静态资 ...

  3. Android使用的webcview中带有音乐播放控件,在关闭或分享时处于界面不可见状态下,声音仍在播放的问题解决

    一. 问题出现原因         我们在做APP分享时,分享webview加载带有音乐播放控件的网页.当弹出分享界面,webview的网页处于后台状态或关闭该网页时,音乐声仍在播放.出现该类现象使我 ...

  4. 联想 A5(L18011) 免解锁BL 免rec Magisk Xposed ROOT 救砖 ZUI 3.9.068

    >>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...

  5. vim之补全2(完全个人定制版)

    关于补全的方面要说的的确很多, 这里选择分为两个章叙述. 如果你想学vim, 你需要有很强的耐心, 如果你想锻炼这种耐心, 你可以试着先看完我之前的文章. 好了, 下面继续我们的vim补全吧. vim ...

  6. 在CentOS下搭建Android 开发环境

    在CentOS下搭建Android 开发环境 目录 1.环境搭建 1.1.JDK安装 1.2.Eclipse安装 1.3.ADT安装 1.4.Android SDK安装 1.5.Android NDK ...

  7. Html test

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  8. Mysql 之主从复制,mysql-proxy读写分离

    准备两台mysql服务器,master(192.168.43.64).slave(192.168.84.129) master配置: log-bin=mysql-bin binlog_format=m ...

  9. PHP 之递归遍历目录与删除

    /** * @Description: 递归查询目录文件 * @Author: Yang * @param $path * @param int $level * @return array */ f ...

  10. ESX/ESXi 主机的某些存储阵列可能存在读取或写入性能问题 (1002598)

    Last Updated: 12/14/2018Categories: Troubleshooting  Details 免责声明:本文为 ESX/ESXi hosts might experienc ...