React-Native Getting Started von gaweng 30. Januar 2021 React-Native Ich möchte eine React-Native Reihe starten. Letztlich getrieben, dass die meisten Artikel dich ich gefunden habe einfach nicht mehr dem aktuellem Stand entsprechen. Daher wollte ihr hier eine aktuellere ins Leben rufen. Letztlich bietet React Native vielerlei Möglichkeiten eine native App zu schreiben. Im ersten Teil möchte ich eingehen, wie man am besten seine Umgebung einrichtet.Node.js und npm einrichten Node.js stellt eine Umgebung dar, in der JavaScript lauffähig gemacht wird. npm wiederum ist der dazugehörige Paketmanager. Unter Windows könnt ihr euch die Executable auf dessen Homepage besorgen. In Linux und WSL könnt ihr dies mittels euren Paketmanager der Wahl. In Ubuntu befindet sich jedoch nur die Version 10 im Repo: apt install nodejs . Wenn jedoch eine neuere Version installiert werden soll folgt dieser Anleitung. Überprüfen, ob die Installation sauber erfolgt ist könnt ihr mittels dieser Kommandos: node --version npm --version Android Emulator einrichten Die Installationsdateien findet ihr hier. Wichtig ist lediglich, dass ihr die gewünschte SDK installiert für die ihr entwickeln möchtet. Das ist aber auch noch im Nachhinein möglich unter Configure -> SDK Manager. Als nächstes müsstet ihr noch die Umgebunsvariablen setzen. WSL: SDK installieren Diese sind hier erhältlich. Unter Command line tools -> Linux Entpacken und den Ordner tools nach ~/Android/SDK/tools ablegen. Falls der Pfad noch nicht existiert muss der abgelegt werden. sudo apt install openjdk-8-jdk In der .bashrc folgende Zeilen ergänzenexport ANDROID_HOME=/home/your-name/Android/SDK export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_HOME/tools/bin Bash neustarten und mittels Command sdkmanager "platform-tools" die Tools nachinstallieren Unter Windows ohne WSL Windows+R drücken sysdm.cpl eingeben Im Register Erweitert den Punkt Umgebunsvariablen auswählen Unter Systemvariablen mit Neu ANDROID_HOME anlegen mit dem Pfad zum SDK Ordner. Default ist C:\Users\{User}\AppData\Local\Android\Sdk Die bestehende Systemvariable Path editieren und die Pfade zu platform-tools und tools\bin ergänzen. Default: C:\Users\{User}\AppData\Local\Android\Sdk\platform-tools C:\Users\{User}\AppData\Local\Android\Sdk\tools\bin Unter Linux In der .bashrc folgendes ergänzenexport ANDROID_HOME=/home/{User}/Android/Sdk export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_HOME/tools/bin Projekt anlegen Mit dem Befehl könnt ihr ein React-Native-Projekt anlegen npx react-native init <Projektname> Sollte ein TypeScript-Projekt benötigt werden kann das Template entsprechend ergänzt werden: npx react-native init <Projektname> --template react-native-template-typescript Testumgebung Um nun zu schauen, wie das Ganze ausschaut, müsst ihr lediglich den Emulator starten. Zuerst muss der Metro-Server gestartet werden, von dem die Javascripte auf den Emulator geladen werden können. Das ermöglicht ein Live-Debugging, da Änderungen direkt übernommen werden können. npm start Nächster Step ist die apk für den Emulator zu generieren und zu starten, dazu folgenden Command ausführen: npm run android Dann bleibt nur noch zu sagen viel Spaß beim Entwickeln. Ich werde in Zukunft noch einzelne React-Native Module vorstellen.