• Haupt / Merkmal

Erstellen Sie plattformübergreifende Apps mit React Native

Früher mussten Entwickler Swift / Objective C lernen, um eine iOS-App zu erstellen, oder Java, wenn sie eine Android-App erstellen wollten. Wir haben jetzt eine aufregende Zeit erreicht, in der Webentwickler ihre vorhandenen Fähigkeiten nutzen können, um sowohl Websites als auch Apps zu erstellen, ohne eine völlig neue Sprache lernen zu müssen (und eine Website kann einfach mit einer erstellt werden Webseitenersteller ).

React Native ist eine von Facebook entwickelte JavaScript-Bibliothek. Es wurde 2013 veröffentlicht und hat Apps wie Skype, Bloomberg, Wix und mitgestaltet viel mehr . Sie können nicht nur Ihre vorhandenen JavaScript-Kenntnisse nutzen, sondern auch dieselbe Codebasis verwenden, um sowohl für iOS als auch für Android zu erstellen.

Das Erstellen einer App in React Native mit diesem Lernprogramm ist ein guter Ausgangspunkt für Ihre eigene App. Sie kann leicht verbessert werden, indem Sie weitere Bildschirme hinzufügen, Fehler im Frontend anzeigen und vieles mehr. Sie können die Projektdateien erhalten, die Sie unter benötigen Github .

Nicht ganz das, wonach Sie suchen? Sehen Sie sich unseren Beitrag mit verschiedenen Tutorials an Wie erstelle ich eine App? , unsere Auswahl der Besten Cloud-Speicher oder für diejenigen, die eine Site betreiben, siehe diese Webseitenersteller Optionen.

01. Fangen Sie an

Um mit dem Erstellen Ihres React Native-Projekts zu beginnen, müssen Sie sicherstellen, dass Sie über Folgendes verfügen Node.js Eingerichtet. Sie können dann die installieren create-react-native-app Befehlszeilenprogramm durch Öffnen eines neuen Terminalfensters und Ausführen des folgenden Befehls:

npm install -g create-react-native-app

Sie können dann Ihr neues Projekt erstellen, indem Sie den folgenden Befehl ausführen:

create-react-native-app YourAppName

Sie müssen dann über die Befehlszeile zu Ihrem Ordner navigieren und den Entwicklungsserver starten.

cd myNewApp npm start

Sie können dann mit der Arbeit an Ihrer App beginnen, indem Sie die Datei App.js mit einem Code-Editor öffnen.

02. Führen Sie Ihre App aus

Da hast du benutzt create-react-native-app Über die Befehlszeile zum Erstellen Ihres Projekts können Sie Ihre Anwendung mit der Expo-Client-App testen. Sie müssen lediglich die App aus dem iOS App Store oder Google Play Store herunterladen und dann den QR-Code aus dem Terminal scannen. Sie müssen sicherstellen, dass sich Ihr Gerät im selben Wi-Fi-Netzwerk befindet wie Ihr Computer. Sie können auch den iPhone- oder Android-Simulator verwenden, falls vorhanden Xcode oder Android Studio Eingerichtet.

03. Erstellen Sie ein einfaches Login

Beginnen wir mit dem Hinzufügen von etwas sehr Grundlegendem. Um Ihrer Anwendung Text hinzuzufügen, müssen Sie Folgendes eingeben:

Login Page

Das Arbeiten mit Stilen ist CSS sehr ähnlich. Wenn Sie der gerade erstellten Textzeile einen Stil hinzufügen möchten, bearbeiten Sie diese Textzeile einfach wie folgt:

My Login App

Sie können dann den Textstil unter hinzufügen Stylesheet.create.

mainheader: { color: ‘#000066’, textAlign: ‘center’, fontSize: 16 },

Wir werden jetzt einen voll funktionsfähigen Anmeldebildschirm erstellen, auf dem sich Benutzer anmelden, sich für ein neues Konto registrieren, sich abmelden und sogar ihr Passwort zurücksetzen können. Dies ist etwas, das Sie in mobilen Apps häufig sehen werden, sodass es eine gute Grundlage für zukünftige Projekte bildet.

04. Richten Sie Firebase und NativeBase ein

Wir werden zunächst drei weitere Bibliotheken installieren. Der erste heißt Feuerbasis Dies wird für unsere Benutzerauthentifizierung verwendet, und die zweite heißt NativeBase, eine UI-Komponentenbibliothek. Der letzte heißt React Native Dialog Input, mit dem wir ein Dialogfeld anzeigen können, in das Benutzer Text eingeben können. Navigieren Sie über die Befehlszeile zu Ihrem Projektordner und geben Sie Folgendes ein:

npm install firebase npm install native-base npm install --save react-native-dialog-input

Stellen Sie sicher, dass Sie Firebase-, NativeBase- und React Native Dialog Input oben in die Datei App.js importieren.

import * as firebase from ‘firebase’; import { Container, Content, Header, Form, Input, Item, Button, Label } from ‘native-base’ import DialogInput from ‘react-native-dialog-input’;

Als nächstes müssen wir die Firebase-Konfiguration direkt unter den Importbefehlen einrichten. Sie müssen ein Konto bei Firebase einrichten, um Ihre verschiedenen Einstellungen zu erhalten. Sie können dies tun, indem Sie sich unter registrieren Feuerbasis und ein neues Projekt erstellen. Denken Sie daran, dass Sie die E-Mail- und Kennwortauthentifizierung über das Dashboard aktivieren müssen.

var config = { apiKey: “”, authDomain: “.firebaseapp.com”, databaseURL: “https://.firebaseio. com”, projectId: “”, storageBucket: “.appspot.com”, messagingSenderId: “” }; firebase.initializeApp(config);

05. Bauen Sie den Container

Der nächste Schritt ist das Entfernen der Abschnitt darunter machen() , die beim Erstellen des Projekts von React automatisch dort platziert wurde, und ersetzen Sie es durch den folgenden Container, um das Anmeldeformular einzurichten. Das Formular enthält eine Beschriftung und ein Eingabefeld für eine E-Mail-Adresse und ein Passwort. Wir werden auch drei Schaltflächen erstellen: eine zum Anmelden, eine zum Anmelden und die letzte Schaltfläche ist, wenn ein Benutzer sein Passwort zurücksetzen möchte. Wir setzen oben auf jeder Schaltfläche einen Rand auf 10 Pixel und die Schriftfarbe auf Weiß.

Login Page Email Password Login Sign Up Forgot Password

06. Richten Sie die Ereignisse ein

Zunächst müssen wir einen Konstruktor einrichten, um den Standardstatus einzurichten. Das Email und Passwort Standardwerte werden auf leer gesetzt. Wir werden auch den Wert von einstellen isDialogVisible zu falsch : Dies wird später für unser Dialogfeld zum Zurücksetzen des Passworts verwendet.

constructor(props) { super(props) this.state=({ email: ‘’, password: ‘’, isDialogVisible: false }) }

Wir werden jetzt hinzufügen onChangeText Ereignisse für unsere beiden Texteingaben, sodass jedes Mal, wenn der Benutzer etwas in die E-Mail- oder Kennwortfelder eingibt, der Status beider aktualisiert wird Email und Passwort auf diesen Wert.

onChangeText={(email) => this.setState({ email })} onChangeText={(password) => this.setState({ password })}

Wir müssen auch hinzufügen onPress Funktionen zu unseren Schaltflächen für Login, Anmeldung und vergessenes Passwort. Jeder ruft eine andere Funktion auf. Die Anmeldeschaltfläche ruft eine aufgerufene Funktion auf loginUser wird die Anmeldetaste aufgerufen signUpUser und die Schaltfläche für das vergessene Passwort wird aufgerufen Passwort vergessen .

onPress={() => this.loginUser(this.state.email, this.state. password)}’ onPress={() => this.signUpUser(this.state.email, this.state. password)} onPress={() => this.forgotPassword()}

07. Anmeldefunktion durchführen

Jetzt ist es an der Zeit, unsere Funktionen auszubauen. Wir beginnen mit der Anmeldefunktion ( signUpUser ), die versucht, einen neuen Benutzer in Firebase zu erstellen; Wenn dies erfolgreich ist, wird eine Bildschirmbenachrichtigung angezeigt, um den Benutzer darüber zu informieren, dass sein Konto eingerichtet wurde. Wenn der Benutzer jedoch ein Kennwort mit einer Länge von weniger als sechs Zeichen wählt, wird er aufgefordert, etwas einzugeben, das mindestens sechs Zeichen lang ist. Schließlich müssen wir den Catch Error Handler hinzufügen, damit wir die Fehlermeldung an die Konsole drucken, wenn der Anmeldeversuch über Firebase fehlschlägt.

signUpUser = (email, password) => { try { if(this.state.password.length<6) { alert(“Please enter at least 6 characters”) return; } firebase.auth().createUserWithEmailAndPassword(ema il, password) alert(“Congratulations, your account has been setup”) } catch(error){ console.log(error.toString()) } }

07. Login-Funktion hinzufügen

Als nächstes fügen wir den Login hinzu ( loginUser ) Funktion. Dadurch wird versucht, den Benutzer mit seiner E-Mail-Adresse und seinem Kennwort anzumelden. Wenn sich der Benutzer erfolgreich anmeldet, wird eine Warnung angezeigt, die besagt, dass die Anmeldung erfolgreich war, sowie eine Schaltfläche zum Abmelden. Wir müssen erneut sicherstellen, dass wir einen Catch Error Handler hinzufügen, falls beim Anmeldeversuch ein Fehler auftritt.

loginUser = (email, password) => { try { firebase.auth().signInWithEmailAndPassword(email, password).then((user) =>{ Alert.alert( ‘Signed In’, ‘You have signed in. Well done!’, [ {text: ‘Sign Out’, onPress: this.signOutUser}, ], { cancelable: false } ) }) } catch(error) { console.log(error.toString()) } }

08. Abmeldefunktion hinzufügen

Jetzt geht es weiter mit der Abmeldefunktion, mit der sichergestellt wird, dass der Benutzer abgemeldet wird, sobald er in der Warnung auf die Schaltfläche zum Abmelden klickt.

signOutUser = () => { firebase.auth().signOut().then(function (user){ }).catch(function(error) { console.log(error) }); }

09. Funktion für vergessenes Passwort erstellen

Zum Abschluss unseres Projekts werden wir eine Funktion entwickeln, mit der der Benutzer sein Passwort einfach zurücksetzen kann, falls er es entweder vergessen hat oder es aus einem anderen Grund ändern möchte. Zuerst müssen wir das Dialogfeld direkt außerhalb unseres erstellen Stichworte.

{this. sendReset(useremail)} } closeDialog={ () => { this.setState({ isDialogVisible: this.state.isDialogVisible = false })}}>

Wir müssen jetzt das Dialogfeld anzeigen lassen, damit wir das erstellen Passwort vergessen Funktion, die den Status von ändert isDialogVisible zu wahr.

forgotPassword = () => { this.setState({ isDialogVisible: this.state.isDialogVisible = true }) }

Das Dialogfeld fordert den Benutzer auf, seine E-Mail-Adresse einzugeben. Wenn der Benutzer auf die Schaltfläche Abbrechen klickt, wird das Feld geschlossen, da sich der Status von ändert isDialogVisible zurück zu falsch . Wenn der Benutzer auf die Schaltfläche 'Senden' klickt, wird eine aufgerufene Funktion aufgerufen sendReset zusammen mit der E-Mail-Adresse.

In unserem sendReset Wir werden die E-Mail-Adresse verwenden, um die Firebase zu erstellen sendPasswordResetEmail Anfrage.

sendReset = (useremail) => { var auth = firebase.auth(); auth.sendPasswordResetEmail(useremail).then(function() { alert(“Password reset email has been sent”) }).catch(function(error) { console.log(error) }); }

Dieser Artikel wurde ursprünglich in Ausgabe 312 von veröffentlicht Netz Zeitschrift. Kaufen Ausgabe 312 oder Abonnieren Sie hier .

Zum Thema passende Artikel:

• So erstellen Sie ein App-Symbol in Illustrator
• So erstellen Sie eine AR-App
• Starthilfe React Native mit Expo