Hreyfimynd innskráningarflæði

Þetta blogg er leið til að deila þekkingu minni og hugmyndum með ykkur. Tæplega 700 fylgjendur þegar. Gerir mig glaðan. Markmið dagsins í dag er innskráningar- / útskráningarflæðið sem þú getur séð á GIF hér að neðan!

Þegar ég var að smíða forrit var alltaf erfitt að takast á við innskráningarflæði. Frá sjónarhorni siglinga, frá sjónarhóli notenda, frá sjónarmiði hreins kóða.

Ef notandinn skráði sig áður í forritið ætti hann að reyna að skrá sig sjálfkrafa inn (1). Svo að notandinn þarf ekki að gera neitt. Ef það er nýr notandi ætti umsóknin að gefa innskráningar- / skráningarform (2). Svo að notandinn geti búið til reikning. Þá viljum við venjulega fá nokkur gögn (3). Undirbúðu forritið til að nota. Og að lokum getum við gert appið sjálft (viðurkenndur hluti appsins).

Notaðu flakk

Ég nota venjulega viðbragðsleiðsögn sem leiðsögusafn. Fyrir mig er hvert einasta skref aðskilið hvert frá öðru og skrifað sem blaðsíða / skjár. Svo ef ég er með stærra flæði um borð get ég bætt við eða fjarlægt skrefið mjög auðveldlega. Hér að neðan geturðu séð kóðann fyrir innskráningarflæðisstýringu (þeir kalla það Skipt í viðbragðsleiðsögn). Það er mjög einföld aðferð hvernig á að birta tiltekna síðu þegar endurtekningarástandi var breytt. Þessi stjórnandi er alltaf festur. Þannig að ef við viljum útskrá notanda getum við bara stillt notanda breytu á null í redux verslun og þessi stjórnandi mun skila inn LoginScreen. Auðvelt og hreint!

Svo á þessu stigi höfum við hreinan kóða og hreina flakk. En notandinn mun sjá bara flöktandi skjái (eins og á GIF hér að neðan). Við vitum reyndar ekki hversu lengi þessir skjár verða sýnilegir. Það getur verið aðeins 100ms. Svo hver 100ms React gerir nýjan skjá. Notandinn gæti ruglast hér. Ég vildi gera það snurðulaust og skiljanlegt. Ég ákvað að hylja alla þessa skjái með aðeins einum skjá með merki forritsins.

Flöktandi innskráningarflæði

Hvernig er það gert?

Það er svo einfalt að það er engin þörf á að sýna kóðann. Til er breytileika í redux-verslun sem táknar Y stöðu kápuskjásins. Ef breytan er stillt á 0 þá nær íhluturinn að fullu yfir forritið og ef breytan er stillt á -window.height er íhlutinn út af skjánum - svo notandinn geti séð forritið. Auðvelt, ekki satt?

Athugaðu að við erum að nota useNativeDriver svo að hreyfimyndin muni ekki loka fyrir JS þráð!

Útskrá fjör

Það gæti verið einhver sem er ruglaður af útliti hreyfimynda. Vegna þess að ég sagði að forsíðuskjárinn væri alveg út frá sýnilegu svæði farsímans. Þannig að ef við líflegur á forsíðu þaðan myndi það líta út eins og á myndinni hér að neðan.

Höfuðhausinn yrði hulinn af forsíðuskjánum meðan á hreyfimyndinni stendur (hægri hluti myndarinnar). Sem er ekki það sem við viljum gera. Svo fyrir fjörið sjálft, gefum við nákvæmlega sama haus neðst á forsíðu. Þá verðum við að komast að því hvar botnstaða hausins ​​er (stöðu bar hæð + hæð haus). Þegar við þekkjum stöðuna getum við notað setValue á AnimatedValue og stillt stöðu forsíðu skjásins strax (án hreyfimyndar - hægri hluti myndarinnar hér að neðan). Eftir þetta getum við lífgað forsíðu skjásins eins og venjulega.

Útskráning er í vinnslu

Síðasta teiknimyndin sem við ætlum að ræða um er hvernig á að skýra framvindu útskilnaðarferlisins. Ég ákvað að nota þetta fjör því það lítur út fyrir að það sé í raun að gleyma notandanum (hann er að hverfa).

Það er einfalt ógagnsæi hreyfimynd með smá snúningi á hægri stillingar tákni. Það áhugaverðasta er textinn. Einhver gæti haldið að það sé gert með setTimeout eða með einhverju svipuðu. Með því er það ekki. Við hlustum reyndar á framvindu ógagnsæisgildisins. Til dæmis, ef ógagnsæið er í miðjunni (gildi 0,5) mun kóðinn líta svona út.

Það er góð aðferð hvernig á að gera það vegna þess að við getum notað alla kosti Animated bekkjarins. Til dæmis getum við notað aðra slökun. Svo það verður ekki línulegt. Annar bónus hér er að hann lýkur á nákvæmlega sama tíma og ógagnsæi hreyfimyndin.

Athugaðu að við verðum ekki að gera neitt meðan á hreyfimyndinni stendur, því það er gert með JS þráð. Svo við viljum líklega nota InteractionManager hér.

Athugaðu það í ananasinu

Mig langaði að byggja svona leiksvæði fyrir fjörin mín og þessar greinar. Svo ég ákvað að byggja Ananas - fjármálastjóra. Á aðeins 22 dögum hef ég gert iOS útgáfu, Android útgáfu, vefsíðu kynningu og skrifað hvernig ég smíðaði arðbært forrit hraðar en ég fann nýtt starf! um það. Get ekki sagt hversu mikið ég hef gaman af þessum tíma. Þú ættir að prófa það líka! Ef þú vilt styðja þessar greinar (og ég) geturðu keypt ananasinn. Bara 2,99 $ á ári. Ekkert fyrir þig. Stór hvatning fyrir mig;)