Zum Inhalt

React-Native Project

1. React Native Grundkonzepte

  • Komponente
  • React Native verwendet Komponenten, um die Benutzeroberfläche zu erstellen. Jede Komponente ist wiederverwendbar und modular. Beispiele in deinem Projekt sind MovieCard, TrendingCard, SearchBar, und die verschiedenen Screens wie Profile, Saved, Search.
  • Beispiel: 
    const MovieCard = ({ id, poster_path, title }: Movie) => (
  <TouchableOpacity>
    <Image source={{ uri: poster_path }} />
    <Text>{title}</Text>
  </TouchableOpacity>
);
  • Props und State
  • Props: Werden verwendet, um Daten von einer Elternkomponente an eine Kindkomponente zu übergeben. Beispiel: TrendingCard erhält movie und index als Props.
  • State: Wird verwendet, um den internen Zustand einer Komponente zu verwalten. Beispiel: useState wird verwendet, um den Zustand von searchQuery, savedMovies, etc. zu verwalten.

2. Navigation

  • Expo Router:
  • Dein Projekt verwendet expo-router, das auf file-based routing basiert. Jede Datei im app-Ordner repräsentiert eine Route.
  • Tabs Navigation: Tabs werden verwendet, um zwischen verschiedenen Screens wie Home, Search, Saved, und Profile zu navigieren.
  • Beispiel: 
    <Tabs.Screen
  name="profile"
  options={{
    title: "Profile",
    tabBarIcon: ({ focused }) => (
      <TabIcon focused={focused} icon={icons.person} title="Profile" />
    ),
  }}
/>

3. Styling

  • Tailwind CSS mit NativeWind:
  • Tailwind-Klassen werden mit nativewind verwendet, um das Styling zu vereinfachen.
  • Beispiel: 
    <View className="bg-primary flex-1">
  <Text className="text-white font-bold">Hello World</Text>
</View>
  • StyleSheet
  • React Native's StyleSheet wird ebenfalls verwendet, um Styles zu definieren.
  • Beispiel: 
    const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

4. State Management

  • useState und useEffect:
  • useState wird verwendet, um den Zustand zu verwalten (z. B. searchQuery, savedMovies).
  • useEffect wird verwendet, um Seiteneffekte zu handhaben, wie das Laden von Daten beim Mounten einer Komponente.
  • Beispiel: 
    useEffect(() => {
  loadProfileData();
}, []);

5. Datenverwaltung

  • AsyncStorage
  • Wird verwendet, um Daten lokal zu speichern, z. B. gespeicherte Filme oder Profildaten.
  • Beispiel: 
    const saveProfileData = async () => {
  await AsyncStorage.setItem("profileData", JSON.stringify(profileData));
};
  • API-Aufrufe:
  • Daten werden von der TMDB-API abgerufen. fetchMovies und fetchMovieDetails sind Beispiele für API-Aufrufe.
  • Beispiel: 
    const fetchMovies = async ({ query }: { query: string }) => {
  const response = await fetch(
    `${TMDB_CONFIG.BASE_URL}/search/movie?query=${query}`
  );
  return await response.json();
};

6. Kamera und Bilder

  • Expo Camera:
  • Die Kamera wird verwendet, um Profilbilder aufzunehmen.
  • Beispiel: 
    const takePicture = async () => {
  const photoData = await cameraRef.current.takePictureAsync();
  setPhoto(photoData.uri);
};

7. Listen und FlatList

  • FlatList
  • Wird verwendet, um Listen von Filmen anzuzeigen, z. B. in Saved oder Search.
  • Beispiel: 
    <FlatList data={movies} renderItem={({ item }) => <MovieCard {...item} />} />

8. Lokale und Globale Variablen

  • Umgebungsvariablen:
  • API-Schlüssel und andere sensible Daten werden in der .env-Datei gespeichert.
  • Beispiel: 
    const API_KEY = process.env.EXPO_PUBLIC_MOVIE_API_KEY;

9. Wiederverwendbare Komponenten

  • Beispielkomponenten
  • SearchBar, MovieCard, und TrendingCard sind wiederverwendbare Komponenten, die in verschiedenen Teilen der App verwendet werden.

10. Animationen und Übergänge

  • Reanimated und Gesture Handler:
  • Diese Bibliotheken sind in den Abhängigkeiten enthalten und können für Animationen und Gesten verwendet werden.

11. Fehlerbehandlung

  • Error Handling:
  • Fehler werden in API-Aufrufen und anderen Funktionen behandelt.
  • Beispiel 
    try {
  const response = await fetch(endpoint);
  if (!response.ok) throw new Error("Failed to fetch");
} catch (error) {
  console.error(error);
}

12. Lokale Datenbank (Appwrite)

  • Appwrite:
  • Appwrite wird verwendet, um Suchanfragen und Trends zu speichern.
  • Beispiel: 
    const updateSearchCount = async (query: string, movie: Movie) => {
  await database.createDocument(DATABASE_ID, COLLECTION_ID, ID.unique(), {
    searchTerm: query,
    movie_id: movie.id,
  });
};

Zusammenfassung

Dein Projekt deckt viele wichtige Konzepte von React Native ab, darunter:
- Komponenten und Navigation - Styling mit Tailwind und StyleSheet - State Management mit Hooks - Datenverwaltung mit AsyncStorage und API-Aufrufen - Kamera-Integration - Lokale Datenbank mit Appwrite

npx create-expo-app@latest

funktionale 

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

classbasierte: 

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <View>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increase" onPress={this.increaseCount} />
      </View>
    );
  }
}

export default Counter;


Props (kurz für "Properties") sind ein Mechanismus in React Native, um Daten von einer übergeordneten (Parent) Komponente zu einer untergeordneten (Child) Komponente zu übergeben.

👉 Props sind unveränderlich (read-only), d. h. die Child-Komponente kann sie nicht direkt ändern. 👉 Props helfen dabei, wiederverwendbare Komponenten zu erstellen.




Die Verwendung von React Context zusätzlich zu HTTP-Requests ist sinnvoll, weil sie hilft, den globalen Zustand der App effizient zu verwalten und mehrfach benötigte Daten zu vermeiden.

alt text