Wprowadzenie do tworzenia aplikacji dla systemu Android przy użyciu oprogramowania React Native

Ten przewodnik pomoże Ci rozpocząć korzystanie z oprogramowania React Native w systemie Windows w celu utworzenia międzyplatformowej aplikacji, która będzie działać na urządzeniach z systemem Android.

Przegląd

React Native to platforma aplikacji mobilnych typu open source utworzona przez serwis Facebook open source. Służy do tworzenia aplikacji dla systemów Android, iOS, Web i UWP (Windows) zapewniających natywne kontrolki interfejsu użytkownika i pełny dostęp do platformy natywnej. Praca z platformą React Native wymaga zrozumienia podstaw języka JavaScript.

Rozpocznij pracę z platformą React Native, instalując wymagane narzędzia

1. Zainstaluj program Visual Studio Code (lub wybrany edytor kodu).

2. Zainstaluj program Android Studio dla systemu Windows i ustaw zmienną środowiskową ANDROID_HOME. Postępuj zgodnie z instrukcjami w temacie Konfigurowanie środowiska — React Native. Pamiętaj, aby ustawić wybór systemu rozwijania na "Windows" i wybierz opcję docelowego systemu operacyjnego Android.

3. Ustaw zmienną środowiskową JAVA_HOME. Narzędzie Gradle używane do tworzenia aplikacji systemu Android wymaga określonego wymagania dotyczącego wersji zestawu JAVA SDK. Aby znaleźć obsługiwaną wersję, w programie Android Studio przejdź do pozycji Ustawienia—> kompilacja, wykonywanie, Narzędzia do kompilacji wdrożenia> —> Gradle. Zapisz ścieżkę wybraną z listy rozwijanej Gradle JDK. Ustaw zmienną środowiskową JAVA_HOME na tę ścieżkę, wykonując następujące kroki:

   • W menu wyszukiwania systemu Windows wprowadź: "Edytuj zmienne środowiskowe systemu", spowoduje to otwarcie okna Właściwości systemu .
   • Wybierz zmienne środowiskowe..., a następnie wybierz pozycję Nowy... w obszarze Zmienne użytkownika.
   • Ustaw nazwę zmiennej na JAVA_HOME i wartość ścieżki pobranej z programu Android Studio.

4. Instalowanie środowiska NodeJS dla systemu Windows Warto rozważyć użycie programu Node Version Manager (nvm) dla systemu Windows , jeśli będziesz pracować z wieloma projektami i wersją środowiska NodeJS. Zalecamy zainstalowanie najnowszej wersji LTS dla nowych projektów.

Tworzenie nowego projektu przy użyciu platformy React Native

1. Użyj narzędzia npx, narzędzia do uruchamiania pakietów zainstalowanego z npm, aby utworzyć nowy projekt React Native. w wierszu polecenia systemu Windows, programie PowerShell, terminalu systemu Windowslub zintegrowanym terminalu w programie VS Code (Wyświetl > zintegrowany terminal).

   npx react-native init MyReactNativeApp
   

   Jeśli chcesz uruchomić nowy projekt z określoną wersją oprogramowania React Native, możesz użyć argumentu --version . Aby uzyskać informacje o wersjach oprogramowania React Native, zobacz Wersje — React Native.

   npx react-native@X.XX.X init  <projectName> --version X.XX.X
   

2. Otwórz nowy katalog "MyReactNativeApp":

   cd MyReactNativeApp
   

3. Jeśli chcesz uruchomić projekt na sprzęcie z systemem Android, podłącz urządzenie do komputera za pomocą USB.

4. Jeśli chcesz uruchomić projekt w emulatorze systemu Android, nie musisz podejmować żadnych działań, ponieważ program Android Studio jest instalowany z zainstalowanym domyślnym emulatorem. Jeśli chcesz uruchomić aplikację w emulatorze dla określonego urządzenia. Kliknij przycisk menedżera AVD na pasku narzędzi.

   .

5. Aby uruchomić projekt, wprowadź następujące polecenie. Spowoduje to otwarcie nowego okna konsoli wyświetlającego Node Metro Bundler.

   npx react-native run-android
   

   

   

   Uwaga / Notatka

   Jeśli używasz nowej instalacji programu Android Studio i nie wykonano jeszcze żadnych innych programowania dla systemu Android, podczas uruchamiania aplikacji w wierszu polecenia mogą wystąpić błędy dotyczące akceptowania licencji dla zestawu Android SDK. Takie jak "Ostrzeżenie: licencja dla pakietu Android SDK Platform 29 nie została zaakceptowana". Aby rozwiązać ten problem, możesz kliknąć przycisk Menedżer SDK w programie Android Studio . Możesz też wyświetlić listę i zaakceptować licencje za pomocą następującego polecenia, korzystając ze ścieżki do lokalizacji zestawu SDK na maszynie.

   C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses
   

6. Aby zmodyfikować aplikację, otwórz MyReactNativeApp katalog projektu w wybranym środowisku IDE. Zalecamy program VS Code lub Program Android Studio.

7. Szablon projektu utworzony przez react-native init używa strony głównej o nazwie App.js. Ta strona jest wstępnie wypełniona wieloma przydatnymi linkami do informacji na temat programowania na platformie React Native. Dodaj tekst do pierwszego elementu Text , na przykład ciąg "HELLO WORLD!" pokazany poniżej.

   <Text style={styles.sectionDescription}>
     Edit <Text style={styles.highlight}>App.js</Text> to change this
     screen and then come back to see your edits. HELLO WORLD!
   </Text>
   

8. Załaduj ponownie aplikację, aby wyświetlić wprowadzone zmiany. Może to być realizowane na kilka sposobów.

   • W oknie konsoli Metro Bundler wpisz "r".
   • W emulatorze urządzenia z systemem Android naciśnij dwukrotnie pozycję "r" na klawiaturze.
   • Na urządzeniu z systemem Android sprzętowym potrząśnij urządzeniem, aby wyświetlić menu debugowania react native i wybierz pozycję "Załaduj ponownie".