React Native ist ein Open-Source-Framework für mobile Anwendungen, das von Facebook erstellt wurde. Sie können damit Anwendungen für Android- und iOS-Geräte mit einer einzigen Codebasis entwickeln. Instagram Facebook React Native unterstützt einige der beliebtesten Apps der Welt, wie Instagram und Facebook, und in diesem Beitrag zeige ich Ihnen, wie Sie Ihre erste React Native-App für Android erstellen.

Beispiel für React Native-Code

Der React Native-Code für einen typischen mobilen App-Bildschirm sieht folgendermaßen aus:

import * as React from 'react';import {Text, View, Stylesheet} from 'react-native';const ExampleScreen = (props) { return ( <View style = {styles.containerStyling}> <Text style = {styles.textStyling}> Hello world!</Text> </View> );}const styles = Stylesheet.create({ containerStyling:{ background: '#0000FF' }, textStyling :{ marginBottom :20, color:'#FFF' }});export default ExampleScreen

Wenn Sie genau hinschauen, werden Sie feststellen, dass React Native eine Kombination aus JavaScript, HTML-ähnlichem Markup und CSS verwendet. Dieses Code-Snippet definiert einen Bildschirm mit Textanzeige und Styling.

React Native Entwicklungsumgebungen: Expo vs. React Native CLI

Es gibt zwei Möglichkeiten, eine React Native App zu erstellen:

1. Expo CLI
2. React Native CLI

Ich werde unten über die Vor- und Nachteile der einzelnen sprechen.

Expo CLI

Expo ist ein Open-Source-Framework und eine Plattform für universelle React-Anwendungen, die einen verwalteten App-Entwicklungsworkflow bietet. Es handelt sich um eine Reihe von Tools und Diensten, die auf React Native- und Native-Plattformen basieren und bei der Entwicklung, Erstellung, Bereitstellung und schnellen Iteration von iOS-, Android- und Web-Apps aus derselben JavaScript- oder TypeScript-Codebasis helfen.

Expo nimmt alle Komplexitäten weg, die mit dem Erstellen von React Native-Apps verbunden sind. Einige der Funktionen der Expo CLI umfassen:

• Universelle APIs, die Zugriff auf Funktionen wie Kamera, Karten, Benachrichtigungen, Sensoren, Haptik und vieles mehr bieten.
• Ein Cloud-basierter Build-Service, der Ihnen App-Store-fähige Binärdateien zur Verfügung stellt und Zertifikate verwaltet.
• Over-the-Air-Updates, mit denen Sie Ihre App jederzeit aktualisieren können, ohne den Aufwand und die Verzögerungen beim Einreichen im Store.

React Native CLI

Die React Native CLI ist eine einfachere und Bare-Metal-Entwicklungsumgebung. Das Gute ist, dass es möglich ist, App-Binärdateien auf Ihrem eigenen Computer zu erstellen, ohne auf einen Cloud-Dienst angewiesen zu sein. Auf der anderen Seite ist das Setup viel komplizierter — um Apps für Android zu erstellen, müssen Sie Android Studio installieren und viele Funktionen konfigurieren, bevor Sie loslegen können. Dieser Prozess kann etwas komplex sein, aber die React Native CLI-Umgebung eignet sich eher für professionelle App-Entwickler.

Für dieses Tutorial verwenden wir Expo, da dies der einfachste Weg ist, um mit dem Erstellen von React Native-Apps zu beginnen.

Wie Expo funktioniert

Um Expo zu verwenden, müssen Sie zuerst die Expo-Client-App installieren, die im Play Store verfügbar ist (eine Version ist auch im iOS App Store verfügbar). Mit der Expo Client App können Sie die App zu Testzwecken in Echtzeit ausführen.

Sie können Ihre React Native-App auf Ihrem eigenen Computer mit Ihrem bevorzugten Programmiertexteditor codieren und dann die Expo-CLI verwenden, um Ihre App zu testen oder zu veröffentlichen. Hinter den Kulissen verpackt Expo Ihren React Native-Code und stellt ihn der Expo-Client-App auf Ihrem Gerät zur Verfügung. Sie können die Expo-CLI auch verwenden, um Ihre App zu veröffentlichen und sie jedem mit dem Expo-Client zur Verfügung zu stellen oder um eine eigenständige Version Ihrer App zu erstellen, die in den App Store hochgeladen und ausgeführt werden kann, ohne den Expo-Client zu installieren.

Erstellen einer App mit Expo

In diesem Tutorial verwenden wir die Expo-CLI, um unsere App zu erstellen.

Voraussetzungen

Um eine native React-App mit Expo zu erstellen, müssen Sie Folgendes erfüllen:

• Node.js Version 12 LTS oder höher und Git auf Ihrem Computer
• ein Android-Gerät mit Lollipop (Android 5) oder höher
• die auf Ihrem Android-Gerät installierte Expo-Client-Anwendung (laden Sie den Expo-Client für Android aus dem Play Store herunter)
• ein grundlegendes Verständnis von ReactJS oder JavaScript

Beachten Sie außerdem, dass Ihr Entwicklungscomputer und Ihr Telefon mit demselben drahtlosen Netzwerk verbunden sein müssen.

Knoten herunterladen.js

Besuchen Sie den Knoten.js-Website und laden Sie die neueste Version von Node herunter. Node ist für Windows-, macOS- und Linux-Betriebssysteme verfügbar. Wählen Sie einfach Ihr Betriebssystem aus und installieren Sie es gemäß den Anweisungen auf der Website.

Um zu überprüfen, ob Knoten.js installiert ist, öffnen Sie ein Terminalfenster und geben Sie Folgendes ein:

node -v

Dieser Befehl zeigt die installierte Knotenversion an.

Expo Client installieren

Nachdem Sie Node installiert haben, müssen Sie auch den Expo CLI Client installieren. Führen Sie einfach den folgenden Befehl aus:

 npm install expo-cli --global

Stellen Sie für macOS- und Linux-Benutzer sicher, dass Sie sudo verwenden.

sudo npm install expo-cli --global

Ignorieren Sie alle Warnungen oder Fehler, die bei der Installation der Expo CLI auftreten. Nach einer erfolgreichen Installation sollten Sie die folgende Meldung sehen.

Erstellen Sie eine To-Do-Listen-App Mit React Native

Wir erstellen eine einfache To-Do-Listen-App, mit der Sie eine Liste der zu erledigenden Aufgaben eingeben und auf dem Bildschirm anzeigen können.

Neues Projekt mit Expo erstellen

Führen Sie zunächst den folgenden Expo-CLI-Befehl aus, um ein neues Projekt zu erstellen:

expo init tasklist

tasklist ist der Name des Projekts. Sie werden aufgefordert, eine Vorlage für Ihr Projekt auszuwählen. Wählen Sie vorerst die leere Vorlage, die Ihnen minimale Abhängigkeiten bietet.

Der Befehl expo init erstellt einen Projektordner und installiert alle Abhängigkeiten, die von der React Native-App benötigt werden.

expo init tasklist-app? Choose a template: expo-template-blank📦 Using npm to install packages. You can pass --yarn to use Yarn instead.✔ Downloaded and extracted project files.✔ Installed JavaScript dependencies.✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd tasklist-app- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.- npm run android- npm run ios # requires an iOS device or macOS for access to an iOS simulator- npm run web

Navigieren Sie zum Projektordner und führen Sie den folgenden Befehl aus:

cd tasklist-appnpm start

npm start startet die Expo dev Tools und öffnet einen neuen Tab in Ihrem Browser das sieht so aus:

In diesem Fenster können Sie Ihre App auf einem Simulator oder einem angeschlossenen Gerät ausführen.

Verbinden Sie ein Gerät

Öffnen Sie nun die Expo Client-App auf Ihrem physischen Android-Gerät und wählen Sie die Option QR-Code scannen, wie unten gezeigt.

Gehen Sie als nächstes zurück zum Fenster Expo dev, scannen Sie den Barcode und warten Sie, bis der JavaScript-Bundle-Erstellungsprozess abgeschlossen ist. Dies dauert normalerweise einige Minuten. Wenn der Vorgang abgeschlossen ist, sollte die Anwendung auf Ihrem Telefon ausgeführt werden!

Projektstruktur

Nachdem Ihre Entwicklungsumgebung fertig ist, können Sie den Code für das Projekt mit Ihrem bevorzugten Codeeditor bearbeiten. Der Projektordner sieht ungefähr so aus:

• assets: enthält die Bilder für die App
• node_modules: enthält alle Abhängigkeiten für das Projekt
• App.js: enthält den Code, der die Benutzeroberfläche rendert, und ist eine wichtige Datei

App.js ist im obigen Screenshot geöffnet. Schauen wir uns das genauer an. Zuerst importieren wir React von react. Wir importieren dann die Text und View Komponenten von react-native. Wir importieren auch Stylesheet , was beim Styling hilft.

React Native enthält integrierte Komponenten wie <Text> und <View> im Gegensatz zu Standard-HTML-Komponenten wie <div> und <p>. Die <View> Komponente ist die grundlegendste Komponente in React Native und wird zum Gruppieren anderer untergeordneter Komponenten verwendet — wie <div> in HTML. Die <Text> Komponente wird verwendet, um Textinhalte auf dem Bildschirm anzuzeigen — wie <p> in HTML.

In der Boilerplate-Version von App.js, die Expo erstellt, gibt es eine einfache Ansicht mit einer Textkomponente und einer Statusleiste. Diese Ansicht wird von der App() -Funktion zurückgegeben. Die styles Konstante enthält einige grundlegende CSS, um die Ansicht zu formatieren.Als nächstes fügen wir der App einige neue Komponenten und Stile hinzu!

Erstellen Sie die App-Benutzeroberfläche

Öffnen Sie die App.js-Datei und geben Sie den folgenden Code ein.

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

Der obige Code fügt eine einfache Texteingabe und eine Schaltfläche zum Hinzufügen neuer Aufgaben hinzu. Wir verwenden CSS Flexbox Styling, um die Komponenten nebeneinander zu positionieren.

Ereignisbehandlung hinzufügen

Um die Benutzereingaben zu erhalten, importieren wir zuerst die useState() Funktion von react und aktualisieren damit den Status der newTask() und setnewTask() Funktionen. Da der Benutzer noch nichts eingegeben hat, ist der Anfangszustand leer. Fügen Sie den folgenden Code an die Spitze der App() Funktion hinzu, direkt über return:

const = useState('');

Wir definieren dann die taskInputHandler, die auf die Änderung der Eingabe hört und den Inhalt der setNewTask() Funktion. Fügen Sie diese Zeilen der App() Funktion next hinzu:

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

Jetzt registrieren wir diesen Eingabehandler mit der TextInput Komponente. Aktualisieren Sie Ihre TextInput Komponente so, dass sie wie folgt aussieht.

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

Jetzt müssen wir mit Tastendrücken umgehen. Wenn der Benutzer die Taste + drückt, möchten wir die neue Aufgabe zu einer Liste hinzufügen.

Zuerst definieren wir unseren Status für die Liste der Aufgaben:

 const = useState();

Als nächstes definieren wir eine addTaskHandler -Funktion, um die neue Aufgabe (gefunden im newTask -Status) zur Liste hinzuzufügen.

 const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); };

Und registrieren Sie diesen Ereignishandler mit der <Button> Komponente:

 <Button title = "+" onPress = {addTaskHandler} />

Schließlich fügen wir eine neue Ansicht hinzu, um alle Aufgaben in der von uns erstellten Liste anzuzeigen. Dies geht direkt nach der Eingabecontaineransicht, aber immer noch innerhalb der Hauptcontaineransicht.

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

Vollständiger Quellcode für die App.js

Der vollständige Code für App.js wird unten gezeigt. Vergleichen Sie es mit dem, was Sie haben.

 import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { const = useState(''); const = useState(); const taskInputHandler = (enteredText) => { setnewTask(enteredText); }; const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); }; return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} /> <Button title = "+" onPress = {addTaskHandler} /> </View> <View> {appTasks.map((task) => <Text>{task}</Text>)} </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center, bottom:20 },});

Fazit

In diesem Tutorial haben Sie gelernt, wie Sie mit Expo eine native React-App erstellen.

React Native ist ein großartiges Framework und eine beliebte Plattform für Entwickler und Unternehmen. Mit React Native erstellte Apps funktionieren garantiert reibungslos auf jeder Plattform oder jedem System. React Native spart auch Entwicklungsarbeit, indem Sie Ihre App einmal codieren und auf jeder mobilen Plattform ausführen können.

Premium—Vorlagen für mobile Apps von CodeCanyon

CodeCanyon ist ein Online-Marktplatz mit Hunderten von Vorlagen für mobile Apps – für Android, iOS, React Native und Ionic. Sie können Tage, sogar Monate, Aufwand sparen, indem Sie einen von ihnen verwenden.Egal, ob Sie gerade erst mit React Native beginnen oder ein erfahrener Entwickler sind, eine React Native App-Vorlage ist eine großartige Möglichkeit, Zeit und Mühe bei Ihrem nächsten App-Projekt zu sparen.

Wenn Sie Probleme bei der Entscheidung haben, welche Vorlage auf CodeCanyon für Sie geeignet ist, sollten Ihnen diese Artikel helfen:

• 
  Mobile App
  21+ Best React Native App Templates of 2021 (Including 5 Free)
  Franc Lucas
• 
  Ionic
  15 Stunning Ionic App Templates and Ionic Themes
  Franc Lucas
• 
  React
  9 React Native App Templates for You to Study and Use
  Franc Lucas