IT ENCYKLOPEDIE

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== 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í [[it:sw:javascript|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://
  * [[it:sw:react|Framework React a komponenty]]
  * [[it:sw:javascript|Základy JavaScriptu]]
  * [[it:sw:typescript|TypeScript v mobilním vývoji]]

//Tagy: {{tag>programming react-native mobile-development ios android javascript}}//