React Native by Behrends, Erik -- Read -- Imperial Library of Trantor

Index

Cover Titel Impressum Inhalt Einleitung 1 React Native kurz vorgestellt

React Native: viele Vorteile, wenige Einschränkungen Architektur und Funktionsweise des Frameworks Zusammenfassung

2 Erste Schritte mit React Native

Vorbereitungen und Installation

Einen Editor für die Programmierung auswählen Die App Expo auf das Smartphone laden Node.js auf dem Rechner installieren Installation von create-react-native-app

Entwicklung der ersten App

Ein Projekt für React Native erstellen Die App auf dem Smartphone mit Expo testen Aufbau und Inhalt des Projekts Texte ändern und Button einfügen Styling der App anpassen Verhalten des Buttons zum Setzen des Zählers

Zusammenfassung

3 React Native: die Grundlagen

Relevante Neuerungen in JavaScript

Aus Modulen importieren und exportieren Klassen Konstanten und Variablen (const und let) Pfeilfunktionen Netzwerkzugriff mit fetch und asynchrone Funktionen Weitere nützliche Neuerungen in Version ES2015 und später

React: ein deklaratives Programmiermodell für UI-Komponenten

Deklarative Komponenten mit JSX und props Das Programmiermodell von React-Komponenten

Zusammenfassung

4 Plattformübergreifende UI-Komponenten verwenden

View und Text

Texte darstellen mit Text Komponenten mit View zusammenfassen

Benutzereingaben mit TextInput Einfache Listen mit FlatList Bedienbarkeit von TextInput verbessern

Sichtbarkeit mit KeyboardAvoidingView gewährleisten Referenzen auf Komponenten mit ref setzen

SectionList für Listen mit Abschnitten Button und die Touchable-Komponenten Code durch Komponenten strukturieren Zusammenfassung

5 Styling des Layouts und des Erscheinungsbilds

Styling allgemein

Styles in JavaScript-Objekten definieren und verwenden Von Inline-Styles zur StyleSheet-API

Größe und Anordnung von Komponenten

Breite und Höhe Flexbox-Layout Text zentrieren und Eingabefeld am unteren Rand darstellen

Gestaltung und Erscheinungsbild

Farben und Schrift Rahmen um Komponenten darstellen Äußere und innere Abstände (margin und padding) SectionList stylen Komponenten absolut positionieren

Zusammenfassung

6 Fotos mit der Kamera aufnehmen

Tagebucheintrag als Komponente Code der eigenen Komponenten im Projektordner organisieren Einträge mit Uhrzeit und mehrzeiligem Text Bilder mit Image einbinden Texteingabe und Icon als kombinierte Komponente Kamera ansteuern und Foto übernehmen Foto im Tagebucheintrag darstellen Zusammenfassung

7 Daten lokal speichern und aus dem Web laden

Lokale Datenspeicherung mit AsyncStorage Löschen der Daten ermöglichen Bemerkungen zu AsyncStorage Daten aus dem Web mit fetch einbinden Aktuelle Wetterdaten für den Standort anfordern Zusammenfassung

8 Navigation zwischen mehreren Screens mit Tabs

Die Bibliothek react-navigation Screens für Tagebuch, Fotogalerie und Einstellungen vorbereiten Die Funktionsweise von TabNavigator Eine Tableiste für MyJournal Einheitliche Tableiste in Android und iOS Fotogalerie und Einstellungen umsetzen Zusammenfassung

9 Detailansicht und Editor mit StackNavigator einbinden

Funktionsweise von StackNavigator StackNavigator in die Navigationsstruktur aufnehmen Eine Route im StackNavigator ansteuern Styling der Kopfleiste in StackNavigator anpassen Tagebucheintrag in der Detailansicht darstellen Von der Fotogalerie zur Detailansicht navigieren Editor für Tagebucheinträge erstellen Bearbeiten von Tagebucheinträgen ermöglichen Wetterdaten und Standort im Editor anfragen Zusammenfassung

10 Auf Touchgesten reagieren und Animationen anzeigen

Gesture Responder System Auf Touchgesten mit PanResponder reagieren Wischbewegung auf Tagebucheinträgen erkennen Animationen in React Native einsetzen Eine Wischbewegung animieren Listeneintrag mit Animation ausblenden und löschen Zusammenfassung

11 Abschluss und Ausblick Fußnoten Index Über die Autoren