Komponenty rdzenne i natywne
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
React Native to otwartoźródłowy framework do tworzenia aplikacji na Androida i iOS przy użyciu React oraz natywnych możliwości platformy. W React Native używamy JavaScriptu do dostępu do API platformy oraz do opisywania wyglądu i zachowania interfejsu użytkownika za pomocą komponentów React: bloków wielokrotnie używalnego, zagnieżdżalnego kodu. Więcej o React dowiesz się w następnej sekcji. Najpierw jednak omówmy działanie komponentów w React Native.
Widoki w rozwoju aplikacji mobilnych
W tworzeniu aplikacji na Androida i iOS widok to podstawowy budulec interfejsu: niewielki prostokątny element ekranu, który może wyświetlać tekst, obrazy lub reagować na dane użytkownika. Nawet najmniejsze elementy wizualne aplikacji, jak linijka tekstu czy przycisk, są rodzajami widoków. Niektóre widoki mogą zawierać inne widoki. To widoki aż do samego dołu!
Komponenty natywne
W Androidzie widoki tworzy się w Kotlinie lub Javie; w iOS - w Swift lub Objective-C. W React Native możesz wywoływać te widoki za pomocą JavaScriptu, używając komponentów React. Podczas działania, React Native tworzy odpowiednie widoki Androida/iOS dla tych komponentów. Ponieważ komponenty React Native są oparte na tych samych widokach co natywne aplikacje, aplikacje RN wyglądają, działają i sprawują się jak inne natywne aplikacje. Takie komponenty oparte na platformie nazywamy komponentami natywnymi.
React Native zawiera zestaw podstawowych, gotowych do użycia komponentów natywnych, które możesz od razu wykorzystać w swojej aplikacji. To właśnie komponenty rdzenne React Native.
Ta dokumentacja odnosi się do starszego zestawu API i wymaga aktualizacji, aby odzwierciedlić Nową Architekturę
React Native pozwala też budować własne komponenty natywne dla Androida i iOS, dopasowane do unikalnych potrzeb aplikacji. Istnieje też prężny ekosystem komponentów tworzonych przez społeczność. Sprawdź Native Directory, by zobaczyć, co stworzyła społeczność.
Komponenty rdzenne
React Native oferuje wiele komponentów rdzennych - od kontrolek po wskaźniki aktywności. Wszystkie znajdziesz udokumentowane w sekcji API. Najczęściej używać będziesz następujących komponentów rdzennych:
| React Native UI Component | Android View | iOS View | Web Analog | Description |
|---|---|---|---|---|
<View> | <ViewGroup> | <UIView> | A non-scrolling <div> | A container that supports layout with flexbox, style, some touch handling, and accessibility controls |
<Text> | <TextView> | <UITextView> | <p> | Displays, styles, and nests strings of text and even handles touch events |
<Image> | <ImageView> | <UIImageView> | <img> | Displays different types of images |
<ScrollView> | <ScrollView> | <UIScrollView> | <div> | A generic scrolling container that can contain multiple components and views |
<TextInput> | <EditText> | <UITextField> | <input type="text"> | Allows the user to enter text |
W kolejnej sekcji zaczniesz łączyć te komponenty rdzenne, by zrozumieć działanie Reacta. Poeksperymentuj z nimi już teraz!
Ponieważ React Native używa tej samej struktury API co komponenty React, do startu potrzebna jest znajomość API komponentów React. Następna sekcja to szybkie wprowadzenie lub przypomnienie. Jeśli jednak znasz już Reacta, możesz przejść dalej.
