Začínáme s vývojem pro Android s využitím React Native

Tato příručka vám pomůže začít používat React Native ve Windows k vytvoření multiplatformní aplikace, která bude fungovat na zařízeních s Androidem.

Přehled

React Native je opensourcová architektura mobilních aplikací vytvořená facebookem. Používá se k vývoji aplikací pro Android, iOS, Web a UPW (Windows), které poskytují nativní ovládací prvky uživatelského rozhraní a úplný přístup k nativní platformě. Práce s React Native vyžaduje pochopení základů JavaScriptu.

Začínáme s React Native instalací požadovaných nástrojů

1. Nainstalujte Visual Studio Code (nebo editor kódu podle výběru).

2. Nainstalujte Android Studio pro Windows a nastavte proměnnou prostředí ANDROID_HOME. Postupujte podle pokynů v tématu Nastavení prostředí – React Native. Nezapomeňte nastavit výběr vývojového operačního systému na Windows a výběr cílového operačního systému na Android.

3. Nastavte proměnnou prostředí JAVA_HOME. Nástroj Gradle používaný k vytváření aplikací pro Android vyžaduje pro sadu Java SDK konkrétní verzi. Pokud chcete najít podporovanou verzi, přejděte v Android Studiu do Nastavení - Build, Execution, Deployment - Build Tools - Gradle>>>. Poznamenejte si cestu vybranou v rozevíracím seznamu Gradle JDK . Nastavte proměnnou prostředí JAVA_HOME na tuto cestu pomocí následujícího postupu:

   • V nabídce hledání systému Windows zadejte: "Edit the system environment variables" (Upravit proměnné systémového prostředí), otevře se okno Vlastnosti systému .
   • Zvolte Proměnné prostředí... a pak v části Uživatelské proměnnézvolte Nový... .
   • Nastavte název proměnné na JAVA_HOME a hodnotu na cestu, kterou jste získali z Android Studia.

4. Instalace NodeJS pro Windows Pokud budete pracovat s více projekty a verzemi NodeJS, doporučuje se zvážit použití Řízení verzí uzlu (nvm) pro Windows. Doporučujeme nainstalovat nejnovější verzi LTS pro nové projekty.

Poznámka:

Můžete také zvážit instalaci a použití terminálu Windows pro práci s upřednostňovaným rozhraním příkazového řádku (CLI) a Git pro správu verzí. Sada Java JDK je součástí sady Android Studio verze 2.2 nebo novější, ale pokud potřebujete aktualizovat sadu JDK odděleně od Android Studia, použijte instalační program systému Windows x64.

Vytvoření nového projektu pomocí React Native

1. Pomocí npx, nástroj pro spouštěč balíčků, který je nainstalován s npm k vytvoření nového projektu React Native. z příkazového řádku Windows, PowerShellu, terminálu Windows nebo integrovaného terminálu v editoru VS Code (zobrazení > integrovaného terminálu).

   npx react-native init MyReactNativeApp
   

   Pokud chcete spustit nový projekt s konkrétní verzí React Native, můžete použít --version argument. Informace o verzích React Native naleznete v tématu Verze – React Native.

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

2. Otevřete nový adresář MyReactNativeApp:

   cd MyReactNativeApp
   

3. Pokud chcete projekt spustit na hardwarovém zařízení s Androidem, připojte ho k počítači pomocí kabelu USB.

4. Pokud chcete projekt spustit v emulátoru Androidu, neměli byste při instalaci Android Studia s nainstalovaným výchozím emulátorem provádět žádnou akci. Pokud chcete aplikaci spustit v emulátoru konkrétního zařízení. Na panelu nástrojů klikněte na tlačítko Správce AVD .

   

5. Pokud chcete projekt spustit, zadejte následující příkaz. Otevře se nové okno konzoly zobrazující Node Metro Bundler.

   npx react-native run-android
   

   Snímek obrazovky

   

   Poznámka:

   Pokud používáte novou instalaci Android Studia a ještě jste neprovedli žádný jiný vývoj pro Android, při spuštění aplikace o přijetí licencí pro Android SDK se můžou na příkazovém řádku zobrazit chyby. Například „Upozornění: Licence pro balíček Android SDK Platform 29 nebyla přijata.“ Pokud chcete tento problém vyřešit, můžete kliknout na tlačítko Správce sady SDK v Android Studiu . Nebo můžete vypsat a přijmout licence pomocí následujícího příkazu. Nezapomeňte použít cestu k umístění sady SDK na vašem počítači.

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

6. Pokud chcete aplikaci upravit, otevřete MyReactNativeApp adresář projektu v integrovaném vývojovém prostředí podle vašeho výběru. Doporučujeme VS Code nebo Android Studio.

7. Šablona projektu vytvořená pomocí react-native init používá hlavní stránku s názvem App.js. Tato stránka je předem naplněna mnoha užitečnými odkazy na informace o vývoji React Native. Přidejte nějaký text do prvního textového prvku, například do řetězce "HELLO WORLD!", který je zobrazený níže.

   <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. Znovu načtěte aplikaci, aby se zobrazily změny, které jste provedli. Existuje několik způsobů, jak to udělat.

   • V okně konzoly Metro Bundler zadejte "r".
   • V emulátoru zařízení s Androidem poklepejte na "r" na klávesnici.
   • Na hardwarovém zařízení s Androidem zatřeste zařízením a zobrazte nabídku ladění React Native a vyberte Znovu načíst.