React Native in der mobilen Entwicklung: was es ist, Schlüsselkonzepte und wie es funktioniert

Grundlagen (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — syntaktische Erweiterung von JavaScript zur Beschreibung der UI. Sieht aus wie HTML, funktioniert aber über React.createElement(). JSX-Ausdrücke: {variable}, {condition && <View />}, {array.map()}. Functional Component — eine Funktion, die JSX zurückgibt. Nimmt props als Argument entgegen. Moderner React-Standard (vor React 16.8 wurden Class Components verwendet). Hooks — Funktionen für den Zugriff auf Zustand und Lebenszyklus aus Functional Component. Hooks-Regeln: nur auf oberster Ebene, nur in Functional Components.

Hooks-Referenz

useState — lokaler Zustand. useEffect — Nebenwirkungen. useContext — Zugriff auf Context. useRef — mutierbarer Ref. useCallback — Funktion-Memoization. useMemo — Wert-Memoization. Custom Hooks — wiederverwendbare Logik: function useDebounce(value, delay).

// Functional Component mit Hooks in React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — gibt [value, setValue] zurück. setValue — ersetzt (führt nicht zusammen wie setState in Class). Für Objekte: setUser(prev => ({ ...prev, name: 'New' })). useEffect — wird nach dem Rendern ausgeführt. Abhängigkeitsarray: [] — einmal (Mount), [dep] — wenn dep sich ändert, undefined — jedes Rendern. Bereinigungsfunktion — return () => {}. useContext — const value = useContext(MyContext). Erfordert Context.Provider weiter oben im Baum.

useRef — mutierbares Objekt, das den Wert zwischen Renderings beibehält. .current — Mutation. Verwendet für: Zugriff auf native Elemente (ref={inputRef}), Speichern vorheriger Werte, Timer. useCallback — gibt eine memoized Funktion zurück. const handlePress = useCallback(() => {}, [dep]). useMemo — gibt einen memoized Wert zurück. const sorted = useMemo(() => data.sort(), [data]). Verwenden Sie useMemo für teure Berechnungen.

useState — für einfachen Zustand. useEffect — für API-Aufrufe und Abos. useCallback/useMemo — zur Optimierung. IT Sectr empfiehlt, nicht alles zu memoizen — nur bei echten Leistungsproblemen.

Custom Hooks

Custom Hook — eine Funktion, die integrierte Hooks verwendet. Name beginnt mit use*. Beispiele: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks sind die primäre Methode zur Wiederverwendung von Logik in React Native. IT Sectr empfiehlt, Geschäftslogik in Custom Hooks auszulagern und Komponenten sauber zu halten (nur JSX + Styles).

Komponenten (View, Text, FlatList, ScrollView, SafeAreaView)

View — Basis-Container (analog zu div). Text — Text (einzige Komponente für Text). TextInput — Texteingabe. ScrollView — scrollbarer Container. FlatList — virtualisierte Liste für große Datenmengen. SectionList — FlatList mit Abschnitten. SafeAreaView — automatischer Abstand von Safe Area (Notch, Statusleiste). Pressable — moderner Ersatz für TouchableOpacity. useColorScheme — Erkennung von dunklem/hellem Thema.

FlatList-Optimierung

FlatList — Virtualisierung: nur sichtbare Elemente + windowSize werden gerendert. Optimierung: 1) keyExtractor — eindeutiger Schlüssel, 2) getItemLayout — feste Höhe (überspringt onLayout-Messung), 3) React.memo für renderItem, 4) maxToRenderPerBatch (Standard 10), 5) windowSize (Standard 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigation in React Native

React Navigation — Standard-Navigations-Stack. NativeStackNavigator — native Animation (push/pop). TabNavigator — untere Tabs. DrawerNavigator — Seitenmenü. NavigationContainer — Root-Komponente der Navigation. Deep linking — Linking-Konfiguration für externe Links. Authentifizierungsablauf — bedingte Navigation: isAuth ? AppStack : AuthStack. IT Sectr empfiehlt NativeStackNavigator für Hauptbildschirme und TabNavigator für die Navigation erster Ebene.

Styles (StyleSheet)

StyleSheet.create() — Erstellung von Styles. Alle Eigenschaften in camelCase: backgroundColor, fontSize, marginTop. Flexbox — Standard-Layout-Modell (flexDirection: 'column'). Keine CSS-Kaskade, keine Vererbung, keine Selektoren. Inline-Styles — funktionieren, werden aber nicht empfohlen. StyleSheet.compose() — Kombinieren von Styles. Platform.select — plattformspezifische Styles: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — Verwaltung von Safe-Area-Insets.

Styled Components und CSS-in-JS

Styled Components — Bibliothek für CSS-in-JS in React Native. Restyle — Theming + responsive Styles. NativeWind — Tailwind CSS für React Native. Unistyles — schnelle Styles mit atomarem CSS. Dark Mode — useColorScheme + dynamische Styles. IT Sectr empfiehlt StyleSheet.create für Einfachheit und NativeWind für Projekte mit Designsystem.

Animation (Animated API)

Animated API — deklarative Animation. Animated.Value — Animationswert. Animated.timing — einfache Animation. Animated.spring — Federanimation. Animated.View — animierbares View. useNativeDriver — Animation im nativen Thread (transform, opacity — unterstützt). Animated.loop — Schleifenanimation. LayoutAnimation — automatische Animation bei Layoutänderung. reanimated 2/3 (Bibliothek) — leistungsfähigere Alternative. Metro Bundler — JavaScript-Bundler. Bündelt JS + Assets in ein Bundle. Unterstützt Fast Refresh (Hot Reload). Hermes — für Mobilgeräte optimierte JS-Engine: schneller Start, weniger Speicher. Standard seit RN 0.70+.

Gesture Handler und Animationen

React Native Gesture Handler — native Gestenverarbeitung. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — deklarative Gesten-API. Reanimated + Gesture Handler — Kombination für 60fps-Animationen mit Gesten. react-native-skia — GPU-Rendering für komplexe 2D-Grafiken. IT Sectr empfiehlt Reanimated 3 für alle Animationen, die leistungsfähiger als Animated API sind.

Netzwerk (fetch, AsyncStorage, API)

fetch — integrierter HTTP-Client. Unterstützt GET, POST, headers, body. Axios — beliebte Bibliothek mit Interceptors. AsyncStorage — Key-Value-Speicher (ähnlich UserDefaults). MMKV — schnelle Alternative zu AsyncStorage von WeChat. react-native-keychain — sicheres Token-Speichern. React Query (TanStack Query) — Server-State-Management: Caching, Revalidierung, Paginierung. IT Sectr empfiehlt React Query für API-Anfragen und MMKV für lokale Speicherung.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules und Turbo Modules

Native Module — Brücke zwischen JS und nativem Code (Java/Kotlin für Android, ObjC/Swift für iOS). Ermöglicht das Aufrufen nativer APIs aus JS. Turbo Modules (New Architecture) — Ersatz für alte Native Modules. Synchroner Aufruf, Typisierung via Codegen, weniger Overhead. Fabric Renderer — neuer Renderer mit synchronem Layout. JSI (JavaScript Interface) — direkter JS-Zugriff auf native Objekte ohne Brücke. IT Sectr empfiehlt Turbo Modules für neue Projekte und Native Modules für bestehende.

// Android Native Module (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Testen (Jest, React Native Testing Library)

Jest — Standard-Test-Runner. describe/it/expect. React Native Testing Library — Komponententests. render, fireEvent, waitFor. screen.getByText, getByTestId — Suche. userEvent — Aktionssimulation. Snapshot-Tests — toMatchSnapshot(). MSW (Mock Service Worker) — API-Mocking. Detox — E2E-Tests für RN (Grey-Box, nativ). IT Sectr empfiehlt React Native Testing Library für Komponenten und Detox für End-to-End-Szenarien.

CodePush (App Center) — OTA-Updates des JS-Bundles ohne Veröffentlichung im App Store/Google Play. Verwendet für: Hotfixes, A/B-Tests, Inhaltsänderungen. Einschränkungen: nativer Code kann nicht geändert werden. Alternativen: EAS Update (Expo), react-native-update. IT Sectr empfiehlt CodePush für dringende Korrekturen und EAS Update für Expo-Projekte.

Expo — Framework für React Native. Managed Workflow — alle Konfigurationen über app.json. Development Builds — benutzerdefinative native Module ohne eject. Expo SDK — integrierte Module: Kamera, Biometrie, Benachrichtigungen. EAS Build — Cloud-Build. Expo Router — dateibasiertes Routing (ähnlich Next.js). IT Sectr empfiehlt Expo für neue Projekte und bare RN für Projekte mit tiefer nativer Anpassung.