Jaké jsou základní komponenty v React Native?

Question

Accepted Answer

React Native poskytuje sadu **základních komponent** — jako **View**, **Text**, **Image**, **ScrollView**, **TextInput** — které se mapují na nativní prvky uživatelského rozhraní. Jsou to základní stavební prvky uživatelského rozhraní React Native, používané místo webových prvků HTML. ## Základní komponenty (vs webové HTML) ```text React Native uses its OWN components (mapping to native views), NOT HTML: VIEW → a container (like a

) — the basic layout building block TEXT → display text (ALL text must be inside a , unlike web) IMAGE → display images (local or remote) TEXTINPUT → text input field (like an ) SCROLLVIEW → a scrollable container FLATLIST → an efficient scrollable LIST (for long lists — renders lazily) TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas) BUTTON → a basic button ``` ## Příklad ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## Klíčové rozdíly od webu ```text ✓ Use not

, not

/; ALL text must be in ✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling ✓ Touchables/Pressable for interactions (not onClick on divs) ✓ FlatList for long lists (efficient) — not mapping over everything ``` ## Proč to má smysl Rozdíl mezi webem a React Native je zásadní pro pochopení základních komponent, protože **jsou to stavební prvky každého uživatelského rozhraní React Native** — skládáte je, abyste vytvořili rozhraní, takže je to nezbytné základní poznatky. React Native poskytuje **vlastní komponenty**, které se mapují na nativní pohledy (nikoli na webové prvky HTML), a pochopení těch podstatných — **View** (kontejner, jako div), **Text** (pro veškerý text s důležitým pravidlem, že veškerý text musí být uvnitř komponenty Text, na rozdíl od webu), **Image**, **TextInput**, **ScrollView**, **FlatList** (pro efektivní dlouhé seznamy), a touchables/**Pressable** (pro zpracování klepnutí) — je nezbytné pro vytvoření jakéhokoliv uživatelského rozhraní React Native. Pochopení **klíčových rozdílů od webu** je obzvláště důležité pro vývojáře webu/React přecházející na React Native: používání View místo div a Text místo p/span (s pravidlem, že veškerý text musí být v Text), stylování přes vlastnost style místo CSS tříd/souborů, používání touchables/Pressable pro interakce místo onClick a používání **FlatList pro dlouhé seznamy** (která se vykresluje efektivně/líně) místo mapování nad vším — tyto rozdíly jsou časté překážky, které pochopení základních komponent objasňuje. Komponenty se skládají (jako React) pro vytvoření uživatelských rozhraní s View jako základním kontejnerem. Protože základní komponenty jsou stavebními prvky každého uživatelského rozhraní React Native (stále je používáte k vytváření rozhraní) a jejich pochopení a jejich rozdíly od webového HTML jsou zásadní pro vytváření aplikací React Native (zvláště pro webové vývojáře), je pochopení základních komponent nezbytné, základní znalosti React Native — základní slovní zásobu uživatelského rozhraní React Native, nezbytné pro vytvoření jakéhokoliv rozhraní a pro přizpůsobení webových znalostí React na nativní model komponent, základní kompetence pro vývoj React Native.