React Native

Příklady z praxe

1. 01

   Jedna produktová obrazovka pro iOS a Android

   E-shopový tým vytvoří jednu obrazovku produktu v React Native a použije ji pro iOS i Android. Texty, stav košíku a volání API zůstanou společné, ale platební tlačítko se přizpůsobí platformě. Výsledkem je rychlejší vývoj bez toho, aby uživatel viděl webview.

   import { Platform, Pressable, Text } from 'react-native';
   
   export function BuyButton({ onPress }) {
     return (
       <Pressable onPress={onPress}>
         <Text>{Platform.OS === 'ios' ? 'Koupit přes Apple Pay' : 'Koupit přes Google Pay'}</Text>
       </Pressable>
     );
   }

2. 02

   Mapa s velkým počtem markerů

   Logistická aplikace zobrazuje stovky kurýrů na mapě a při každém posunu posílá příliš mnoho dat mezi JavaScriptem a nativní mapou. Tým nechá formuláře a navigaci v React Native, ale shlukování bodů přesune do nativní knihovny. Aplikace zůstane sdílená tam, kde to dává smysl, a plynulost mapy se zlepší.

Časté omyly

MýtusReact Native je jen webová stránka zabalená do mobilní aplikace.

Ve skutečnostiReact Native nepoužívá pro běžné rozhraní HTML prvky ve webview. Komponenty se vykreslují jako nativní prvky platformy, i když se jejich logika často píše v JavaScriptu nebo TypeScriptu.

MýtusV React Native se napíše jedna aplikace a na iOS i Androidu bude všechno automaticky stejné.

Ve skutečnostiReact Native umožňuje sdílet velkou část kódu, ale platformní rozdíly zůstávají. Navigace, oprávnění, build proces, notifikace nebo platby často potřebují zvláštní úpravy pro iOS a Android.

Časté dotazy

Pro jaký typ mobilní aplikace se React Native hodí nejvíc?

React Native se hodí pro produkt, který má mít podobné funkce na iOS i Androidu a potřebuje rychlé iterace. Typické jsou zákaznické zóny, tržiště, chaty, rezervační aplikace, interní nástroje nebo doprovodné aplikace ke službě. React Native dává menší smysl, když je hlavní hodnotou aplikace extrémní grafický výkon, složité napojení na systémové funkce nebo zcela odlišné UX pro každou platformu.

Stačí pro React Native jen znalost webového Reactu?

React Native vyžaduje znalost Reactu, JavaScriptu nebo TypeScriptu a také základní orientaci v mobilním vývoji. Vývojář nemusí být seniorní iOS ani Android specialista, ale dříve nebo později narazí na Xcode, Gradle, emulátory, oprávnění, certifikáty a nativní knihovny. Pro menší aplikace stačí webové zkušenosti déle, u složitějších projektů je mobilní znalost nezbytná.

Je React Native dost rychlý pro reálnou aplikaci?

React Native aplikace může být velmi plynulá, pokud architektura respektuje hranice mezi JavaScriptem a nativní částí. Výkon obvykle netrpí u běžných formulářů, seznamů, navigace nebo komunikace s API. Problémy vznikají u častých překreslení, velkých seznamů bez virtualizace, intenzivních animací nebo práce s velkými daty předávanými mezi vrstvami. Řešením bývá profilování, optimalizace komponent a vhodné nativní moduly.

Může React Native sdílet kód s webovou aplikací?

React Native dovoluje část logiky sdílet s webem, například validace, datové klienty, typy, některé hooky nebo pravidla design systému. Uživatelské rozhraní ale používá jiné primitivy než HTML a CSS, takže webovou komponentu obvykle nelze jednoduše zkopírovat. Sdílení funguje nejlépe v monorepu s jasně oddělenou doménovou logikou a platformně specifickými UI vrstvami.

Zdroje

1. React Native(otevře se v novém okně)Wikipedia
2. React(otevře se v novém okně)React
3. React Native for Windows(otevře se v novém okně)Microsoft Learn
4. ECMA-262(otevře se v novém okně)Ecma International

Související pojmy

• FlutterFlutter je open source UI framework od Googlu, který z jedné kódové základny v jazyce Dart staví aplikace pro Android, iOS, web, Windows, macOS a Linux. Uživatelské rozhraní si vykresluje vlastním grafickým enginem místo nativních komponent, takže vypadá na všech platformách stejně a chová se předvídatelně.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Adresa v pamětiAdresa v paměti je číslo, kterým procesor jednoznačně označuje konkrétní buňku operační paměti, obvykle jeden bajt. Program pomocí adresy říká, odkud má data načíst nebo kam je zapsat. Adresy tvoří souvislý číselný rozsah, jehož velikost určuje šířka adresní sběrnice a architektura, typicky 32 nebo 64 bitů.
• AI agentAI agent je softwarový systém, který pomocí modelu umělé inteligence vnímá zadaný kontext, plánuje další kroky a samostatně volá nástroje nebo služby k dosažení cíle. Na rozdíl od jednorázového promptu udržuje stav úlohy, vyhodnocuje výsledky akcí a může opakovat postup, dokud nesplní zadání nebo nenarazí na limit.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.