React Native to obecnie jedno z najpopularniejszych rozwiązań do tworzenia aplikacji mobilnych na Androida i iOS. Pozwala na szybkie budowanie interfejsu użytkownika przy użyciu komponentów, a także na łatwą integrację z zewnętrznymi API i bazami danych. W tym artykule przedstawimy krok po kroku, jak stworzyć pełnoprawną aplikację mobilną w React Native - od podstaw po publikację w sklepach z aplikacjami.
Podstawy React Native i konfiguracja środowiska programistycznego
Wprowadzenie do React Native
React Native to opensource'owy framework stworzony przez Facebooka, pozwalający na tworzenie natywnych aplikacji mobilnych przy użyciu JavaScript i React. Główne zalety to możliwość budowania interfejsu z wykorzystaniem komponentów, szybki rozwój dzięki hot reload oraz duża część kodu wspólna dla Androida i iOS.
React Native kompiluje kod JavaScript do natywnego kodu Java lub Objective C, dzięki czemu aplikacje działają płynnie i mają dostęp do wszystkich funkcji systemów mobilnych. Interfejs budowany jest z natywnych komponentów, a nie jak w przypadku hybryd webview.
React Native pozwala na szybkie prototypowanie i iterację dzięki hot reload, bez konieczności kompilacji po każdej zmianie. Integruje się z Expo lub natywnymi modułami. Posiada rozbudowaną społeczność i ekosystem bibliotek.
Instalacja Node.js i npm
Do pracy z React Native niezbędne jest zainstalowanie Node.js - środowiska uruchomieniowego JavaScript po stronie serwera. Zawiera ono menedżer pakietów npm, który posłuży do instalacji React Native i innych bibliotek.
Najprościej zainstalować Node.js i npm bezpośrednio ze strony nodejs.org. Pobieramy instalator dla naszego systemu operacyjnego i postępujemy zgodnie z instrukcją instalacji. Sprawdzamy, czy node i npm zostały poprawnie zainstalowane, wpisując w konsoli node -v i npm -v.
Konfiguracja środowiska programistycznego
Do tworzenia aplikacji React Native potrzebne jest środowisko programistyczne. Możemy wybrać Visual Studio Code lub Android Studio / Xcode w zależności od targetowanej platformy. Konieczne jest również zainstalowanie Xcode (iOS) lub Android SDK (Android).
W Visual Studio Code instalujemy rozszerzenia React Native Tools i ESLint, które ułatwią pracę z kodem. W Android Studio lub Xcode instalujemy emulator, na którym będziemy uruchamiać aplikację w trakcie developmentu.
Alternatywnie można wykorzystać Expo, które udostępnia środowisko programistyczne online bez konieczności konfiguracji natywnego środowiska.
Tworzenie pierwszej aplikacji w React Native
Struktura projektu React Native
Tworzenie projektu React Native zaczynamy od wygenerowania struktury katalogów komendą npx react-native init NazwaProjektu. Powstanie folder zawierający główne elementy aplikacji:
- Folder android - konfiguracja natywnego projektu Androida
- Folder ios - konfiguracja natywnego projektu iOS
- App.js - główny komponent aplikacji
- index.js - punkt wejścia aplikacji
Dodatkowo jest folder node_modules z zainstalowanymi bibliotekami oraz pliki konfiguracji środowiska.
Tworzenie komponentów
Interfejs w React Native budujemy z komponentów. Tworzymy komponenty jako osobne pliki .js i importujemy je tam gdzie chcemy użyć.
Komponenty mogą przyjmować właściwości i zwracać JSX - rozszerzenie składni JavaScript umożliwiające tworzenie interfejsu w kodzie.
Przykład komponentu WidokTekstowy który wyświetla tekst przekazany w props:
``` const WidokTekstowy = (props) => { return {props.tekst} } ```
Stylowanie komponentów
Do stylowania w React Native używamy StyleSheet zamiast regularnych CSS. Pozwala to na optymalizację stylów i lepszą wydajność aplikacji.
Przykład stylu ustawiającego kolor tła i padding elementu View:
``` const styles = StyleSheet.create({ viewStyl: { backgroundColor: '#fff', padding: 10 } }) ```
Następnie używamy w komponentach jak styles.viewStyl. React Native obsługuje większość właściwości CSS.
Budowanie interfejsu użytkownika w React Native
Widoki i komponenty UI
React Native dostarcza zestaw podstawowych komponentów do budowania interfejsu, takich jak View, Text, Image, ScrollView, Button. Pozwalają one na elastyczne tworzenie UI zgodnego z wytycznymi platform Android i iOS.
Możliwe jest zagnieżdżanie komponentów, tworzenie własnych przy użyciu JSX oraz importowanie gotowych bibliotek UI np. React Native Elements.
Nawigacja i routing
Do nawigacji pomiędzy ekranami służą komponenty nawigacji dostarczone przez React Navigation lub React Native Router Flux. Pozwalają one na stosowanie stack nawigacji, tabów, szuflad menu itp.
React Navigation udostępnia komponenty StackNavigator, TabNavigator i DrawerNavigator oraz hooki nawigacji useNavigation, useRoute, useFocusEffect.
Obsługa gestów i animacji
React Native pozwala na dodawanie obsługi gestów takich jak kliknięcie, przesunięcie, pinch. Służy do tego API Gesture Responder System. Możliwe jest też tworzenie animacji za pomocą Animated API.
Przykłady: PanResponder do detekcji przesunięć, Animated.timing do animacji zmiany wartości w czasie.
Komunikacja z API i bazami danych
Pobieranie i wysyłanie danych
Do komunikacji z zewnętrznym API służy AsyncStorage lub biblioteki takie jak Axios. Pozwalają one w prosty sposób pobierać i wysyłać dane JSON przy użyciu żądań HTTP.
Przykład pobrania danych GET:
``` axios.get('https://example.com/api/data') .then(response => { // handle success }) ```
Integracja z REST API
Typowym sposobem integracji React Native z backendem jest REST API, gdzie mamy zdefiniowane endpointy które zwracają dane w formacie JSON. React Native pozwala w łatwy sposób pobierać i wysyłać dane do takich endpointów.
Możliwe jest np. uwierzytelnianie przy pomocy tokenów, obsługa erroów, caching danych po stronie aplikacji.
Wykorzystanie AsyncStorage
AsyncStorage to wbudowana baza klucz-wartość w React Native działająca asynchronicznie. Przydatna do cachingowania danych, tokenów uwierzytelniających, zmiennych globalnych.
Używamy metod setItem, getItem, removeItem. Dane przechowywane są lokalnie w aplikacji.
Publikacja aplikacji React Native
Budowanie aplikacji na Androida i iOS
Aby opublikować aplikację React Native należy najpierw zbudować natywne paczki - APK dla Androida i IPA dla iOS. Służą do tego narzędzia gradle i xcodebuild/xcode.
Proces budowania aplikacji zależy od tego czy używamy Expo czy "czystego" React Native. W Expo build odbywa się w chmurze.
Opcje dystrybucji aplikacji
Zbudowane aplikacje możemy dystrybuować na różne sposoby - wysyłając pliki bezpośrednio na urządzenia, publikując w sklepach Google Play i App Store lub wykorzystując MDM dla firm.
Aktualizacje Over-the-Air
React Native umożliwia aktualizacje OTA (Over-the-Air). Nie wymagają one ponownego przesyłania aplikacji do sklepów - nowa wersja jest pobierana przy starcie. W Expo aktualizacje OTA są automatyczne.
Optymalizacja wydajności i testowanie
Profilowanie wydajności
Wydajność aplikacji React Native możemy monitorować i profilować przy użyciu narzędzi takich jak FPS Monitor czy React Native Debugger. Pozwalają one zidentyfikować wąskie gardła i problemy.
Testy jednostkowe
Niezbędnym etapem developmentu jest pisanie testów jednostkowych, np. przy użyciu Jest. Pozwalają one na testowanie poszczególnych funkcji i komponentów w izolacji i zapewniają brak regresji przy zmianach.
Ciągła integracja i dostarczanie
Dobre praktyki to konfiguracja CI/CD, np. z wykorzystaniem narzędzi takich jak GitHub Actions, które pozwalają na automatyzację procesu budowania, testowania i dystrybucji aplikacji.
Podsumowanie
React Native to obecnie jedno z najlepszych narzędzi do tworzenia mobilnych aplikacji wieloplatformowych. Pozwala na szybki rozwój przy użyciu JavaScript, React i bogatego ekosystemu bibliotek. W tym artykule przedstawiliśmy podstawy pracy z React Native - od instalacji, przez budowanie UI, komunikację z API, aż po finalną publikację aplikacji.框架是构建移动应用程序的强大工具。通过学习本教程,您可以掌握使用React Native进行跨平台开发的技能。