Obsah
React Native: Mobilní aplikace pomocí JS
React Native mění pravidla hry ve vývoji mobilních aplikací. Namísto psaní dvou samostatných kódů (v Swiftu pro iOS a v Kotlinu pro Android) píšete jeden kód v JavaScriptu, který běží na obou platformách, aniž byste obětovali výkon nebo uživatelský zážitek.
1. Jak React Native funguje?
Na rozdíl od hybridních aplikací (jako PhoneGap nebo Cordova), které webovou stránku pouze „zabalí“ do mobilního okna, React Native používá nativní komponenty.
- JavaScript Thread: Zde běží vaše logika v Reactu.
- The Bridge (Most): Speciální komunikační vrstva, která posílá instrukce z JavaScriptu do nativní části telefonu.
- Native Elements: Pokud v kódu napíšete `<View>`, React Native jej na iPhonu vykreslí jako `UIView` a na Androidu jako `ViewGroup`.
—
2. Hlavní výhody
- Sdílený kód: Až 90 % kódu může být společných pro obě platformy, což drasticky snižuje náklady a čas na vývoj.
- Hot Reloading: Vývojáři vidí změny v kódu okamžitě na simulátoru nebo reálném telefonu bez nutnosti zdlouhavé kompilace.
- Nativní výkon: Protože výsledkem jsou skutečné nativní prvky, aplikace je plynulá a reaguje stejně rychle jako aplikace psané přímo pro daný systém.
- Silný ekosystém: Přístup k obrovskému množství knihoven z prostředí JavaScriptu i nativních modulů.
—
3. Komponenty a stylování
React Native nepoužívá HTML tagy (jako `div` nebo `h1`), ale vlastní sadu základních komponent:
| Komponenta | Ekvivalent v HTML | Popis |
|---|---|---|
| <View> | `<div>` | Základní kontejner pro rozvržení. |
| <Text> | `<span>` / `<p>` | Jediný prvek, který může obsahovat text. |
| <Image> | `<img>` | Zobrazení obrázků. |
| <ScrollView> | — | Kontejner, který umožňuje posouvání obsahu. |
| <FlatList> | — | Optimalizovaný seznam pro velké množství dat. |
Stylování probíhá pomocí objektů podobných CSS, ale využívá se výhradně Flexbox pro rozvržení prvků.
—
4. Expo vs. CLI
Při startu projektu mají vývojáři dvě hlavní cesty:
- Expo: Sada nástrojů, která extrémně usnadňuje začátek. Nemusíte instalovat Xcode nebo Android Studio, stačí vám mobilní aplikace Expo Go. Ideální pro začátečníky a rychlé prototypy.
- React Native CLI: Vyžaduje plné nastavení vývojového prostředí. Poskytuje však neomezenou kontrolu nad nativním kódem a je nezbytný pro komplexní projekty vyžadující specifické HW úpravy.
—
5. Kdo používá React Native?
Díky své stabilitě a výkonu na něj spoléhají giganti jako: Facebook, Instagram, Shopify, Pinterest, Skype, Uber Eats nebo Tesla.
Související články:
Tagy: programming react-native mobile-development ios android javascript