Jak vytvořit flip časovač v React Native

Foto: Vico Luna, Unsplash

Úvod

Flip Timer je digitální zařízení pro uchovávání času s časem označeným čísly, která jsou postupně odhalena displejem s rozdělenou klapkou.

Tento článek demonstruje stavbu časovače převrácení v produktu React Native pomocí jeho vystavených rozhraní API a bez dalších závislostí.

Výzvy, které je třeba překonat

  • Implementujte vlastnost transform-origin pomocí technik matice College Math Course, protože to není podporováno v React Native. Otáčení kolem středového původu (ve výchozím nastavení) je snadné, ale musíme přeložit počátek a otočit se kolem okrajů.
  • Implementace komponenty Flip Number.
  • Overflow overflow: skrytý problém v systému Android, protože nefunguje s absolutně umístěnými prvky.

Obsah

  1. Implementujte komponentu Flip Number
  2. Implementujte FoldView
  • Základní rozvržení
  • Překonání výzvy
  • Přidání transformací
  • Přidání animací

3. Aktualizujte komponentu časovače

4. Konečný výsledek

5. Odkazy

Implementujte komponentu Flip Number

Základní rozvržení

Základní rozvržení se skládá ze dvou karet - horní a dolní spojených dohromady tak, aby pohled vypadal jako časovač převrácení.

Číslo karty

Jedná se o základní rozvržení skládající se z obalu a dvou karet - dolní, horní.

Poznámka: Dolní karta obsahuje předchozí číslo. Jeho použití bude odhaleno, jakmile dosáhneme implementace FoldView.

Image Credit: Carbon. | Kód: GitHub

Karta

Obálka karty má přetečení: skryté a převádíme její položky (číslo) na základě typu karty (horní nebo dolní).

Image Credit: Carbon. | Kód: GitHub

Implementujte FoldView

Základní rozvržení

K vytvoření FoldView potřebujeme dva FlipCards podobné NumberCards, ale s absolutním umístěním tak, aby při použití flip animací byly nad NumberCards.

Číslo karty

Přidání komponenty FlipCard do komponenty NumberCard.

Image Credit: Carbon. | Kód: GitHub

Otočit kartu

Komponenta FlipCard je animovaný obal s absolutním umístěním použitým při použití animace převrácení.

Výzva (část 2 a část 3): přetečení: skryté s absolutním umístěním má hlavní problémy v systému Android. Pomocí tohoto sloupku StackOverflow lze tento problém vyřešit pomocí přepadového kontejneru uvnitř absolutně umístěného prvku.

Image Credit: Carbon. | Kód: GitHub

Konečný výsledek

Překonání výzvy

Nyní přichází těžká část. Musíme složit komponentu FlipCard po okrajích.

Protože React Native nepodporuje vlastnost transform-origin, musíme najít nějaký jiný způsob, jak posunout počátek rotace na spodní hranu.

Naštěstí existuje jeden způsob, jak tento problém překonat. Podle tohoto úžasného článku a čtení dokumentů MDN pro vlastnost transform-origin může být implementována pomocí matic.

Utils

React Native vystavuje několik maticových operací v MatrixMath.js. Potřebujeme ty důležité

  • Identita Matrix: Vrací 4 * 4 matici identity [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
Image Credit: Carbon. | Kód: GitHub
  • Vícenásobná matice: Tato metoda obslužného programu generuje výstup založený na násobení 4 * 4 matic aab, dodávaných jako vstup.
Image Credit: Carbon. | Kód: GitHub
  • Otočit matici: Jedná se o vlastní utilitní metodu, která zabere matici 4 * 4 a stupeň, ve kterém bude otočena, a poté ji vynásobí původní maticí, aby vrátila vygenerovaný výsledek.
Image Credit: Carbon. | Kód: GitHub
  • Perspektivní matice: Tato obslužná metoda nám umožní použít perspektivní styl k Reagování Native a pak se vynásobit původní 4 * 4 maticí.
Image Credit: Carbon. | Kód: GitHub
  • Přeložit matici: Tato metoda pomůcky převede původ a upraví původní matici 4 * 4
Image Credit: Carbon. | Kód: GitHub
  • Un-Translate Matrix: Tato metoda pomůcky un-translate původ a upraví původní 4 * 4 matice
Image Credit: Carbon. | Kód: GitHub

Přidání transformací

deg je stupeň, který má být otočen a y je výška komponenty, do které bude převedena.

Výzva (část 1): Kombinace utils z výše uvedeného, ​​transform-původ je úspěšně implementován.

Image Credit: Carbon. | Kód: GitHub

Přidání animací

Image Credit: Carbon. | Kód: GitHub

Aktualizujte komponentu časovače

Přidat čas

Toto využití zvýší časovač o jednu sekundu a upraví hodiny, minuty, sekundy.

Image Credit: Carbon. | Kód: GitHub

Komponenta časovače

Komponenta časovače bude volat Time Util a aktualizovat komponentu na základě hodin, minut, sekund

Image Credit: Carbon. | Kód: GitHub

Komponenta převrácení čísla

Tato součást pouze rozdělí číslo na dvě části na základě jejich umístění číslic a volá komponentu NumberCard.

Image Credit: Carbon. | Kód: GitHub

Konečný výsledek

Odkazy

Vydal jsem pro něj balíček, který obsahuje více přizpůsobitelných vlastností.

  • npm: reakčně-nativní-flip-časovač
  • GitHub: reaktivně nativní flip-timer

Další skvělé věci najdete v profilech StackOverflow a GitHub.

Sledujte mě na LinkedIn, střední, Twitter pro další aktualizace nových článků.

Jeden tlesk, dva tleskání, tři tleskání, čtyřicet?

Původně zveřejněno na blog.pritishvaidya.com 2. března 2019.