Plattform- und Geräteinformationen in React Native

Trotz "schreibe einmal, laufe überall" gibt es echte Unterschiede zwischen iOS und Android (Statusleisten-Höhe, Zurück-Button-Verhalten, Schatten-Syntax) – React Natives Platform-API erlaubt gezielte, plattformspezifische Anpassungen.

1. Beschreibung

Platform.OS liefert 'ios' oder 'android' (bzw. 'web'/'windows'/'macos' je nach Zielplattform), Platform.Version die Betriebssystemversion. Die Helferfunktion Platform.select({{ ios: ..., android: ..., default: ... }}) wählt direkt einen Wert aus, ohne manuelles if/else.

2. Kurzes Beispiel

import { Platform } from 'react-native';

const abstandOben = Platform.select({ ios: 44, android: 24, default: 0 });
const istIos = Platform.OS === 'ios';

3. Komplettes Projekt: Plattform-Informationsbildschirm

npx create-expo-app platform-demo
cd platform-demo

App.js

import { View, Text, StyleSheet, Platform } from 'react-native';

function InfoZeile({ label, wert }) {
  return (
    <View style={styles.zeile}>
      <Text style={styles.label}>{label}</Text>
      <Text style={styles.wert}>{String(wert)}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.titel}>Plattform-Informationen</Text>
      <InfoZeile label="Betriebssystem" wert={Platform.OS} />
      <InfoZeile label="OS-Version" wert={Platform.Version} />
      <InfoZeile label="Ist iOS?" wert={Platform.OS === 'ios'} />
      <InfoZeile label="Ist Android?" wert={Platform.OS === 'android'} />

      <View style={styles.beispielBox}>
        <Text style={styles.beispielText}>
          Diese Box nutzt Platform.select() für ihren Schatten -
          auf Android per elevation, auf iOS per shadow*-Eigenschaften.
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 24 },
  titel: { fontSize: 20, fontWeight: 'bold', marginBottom: 16 },
  zeile: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  label: { color: '#6b7280' },
  wert: { fontWeight: 'bold' },
  beispielBox: {
    marginTop: 24, backgroundColor: 'white', padding: 16, borderRadius: 10,
    ...Platform.select({
      android: { elevation: 4 },
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 6 },
      default: { borderWidth: 1, borderColor: '#e5e7eb' },
    }),
  },
  beispielText: { color: '#374151' },
});

4. Erklärung

Platform.select({{...}}) im Style-Objekt selbst (per Spread-Operator ...Platform.select(...)) ist die idiomatische Art, plattformspezifische Style-EIGENSCHAFTEN zu mischen, statt zwei komplett getrennte Style-Objekte zu pflegen.
Platform.Version hat auf Android eine andere Bedeutung (numerische API-Level wie 34) als auf iOS (Versionsstring wie '17.4') – beim Vergleichen von Versionen muss man das jeweils berücksichtigen.
Neben Platform gibt es für erweiterte Geräteinformationen (Modellname, ist-es-ein-Tablet, Batteriestand) das separate Paket expo-device bzw. react-native-device-info – Platform selbst deckt nur das Betriebssystem ab, keine physischen Geräteeigenschaften.
Der default-Zweig in Platform.select() greift auf allen Plattformen, die nicht explizit genannt sind (z.B. Web bei einer Expo-Web-App) – guter Fallback statt eines Absturzes bei fehlendem Treffer.

5. Ausgaben

Ausgabe

Eine Liste mit vier Zeilen: "Betriebssystem: ios" (oder "android"), "OS-Version: 17.4" (oder z.B. "34"), "Ist iOS?: true"/"false", "Ist Android?: true"/"false" - je nach getestetem Gerät genau EINE der beiden letzten Zeilen "true". Darunter eine weiße Box mit Erklärungstext, deren Schatten auf iOS weich und auf Android als klassischer Material-Schatten erscheint.