Platform-specific code

React Native pozwala pisać kod specyficzny dla iOS lub Android.

Platform.OS

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

export default function PlatformExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Platforma: {Platform.OS}
      </Text>
      <Text style={styles.text}>
        Wersja: {Platform.Version}
      </Text>

      {/* Warunkowy rendering */}
      {Platform.OS === 'ios' && (
        <Text style={styles.iosOnly}>Tylko na iOS!</Text>
      )}

      {Platform.OS === 'android' && (
        <Text style={styles.androidOnly}>Tylko na Android!</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1a5276',
  },
  text: {
    fontSize: 18,
    color: '#fff',
    marginBottom: 10,
  },
  iosOnly: {
    fontSize: 16,
    color: '#3498db',
    marginTop: 20,
  },
  androidOnly: {
    fontSize: 16,
    color: '#2ecc71',
    marginTop: 20,
  },
});

Platform.select()

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

export default function PlatformSelectExample() {
  const instructions = Platform.select({
    ios: 'Naciśnij Cmd+D aby otworzyć menu deweloperskie',
    android: 'Potrząśnij telefonem aby otworzyć menu deweloperskie',
    default: 'Nie rozpoznano platformy',
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Instrukcje:</Text>
      <Text style={styles.instructions}>{instructions}</Text>

      {/* Komponenty specyficzne dla platformy */}
      <View style={styles.button}>
        <Text style={styles.buttonText}>Przycisk</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#1a5276',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 10,
  },
  instructions: {
    fontSize: 14,
    color: '#bdc3c7',
    textAlign: 'center',
    marginBottom: 30,
  },
  button: {
    paddingVertical: 14,
    paddingHorizontal: 28,
    borderRadius: Platform.select({
      ios: 12,
      android: 4,
    }),
    backgroundColor: Platform.select({
      ios: '#007AFF', // iOS blue
      android: '#6200EE', // Material purple
    }),
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

Pliki specyficzne dla platformy

Możesz tworzyć osobne pliki dla każdej platformy:

components/
├── Button.tsx          # Używany gdy nie ma specyficznych
├── Button.ios.tsx      # Używany tylko na iOS
└── Button.android.tsx  # Używany tylko na Android

// Button.ios.tsx
import { Pressable, Text, StyleSheet } from 'react-native';

export default function Button({ title, onPress }) {
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 10,
  },
  text: {
    color: '#fff',
    fontSize: 17,
    fontWeight: '600',
  },
});

// Button.android.tsx
import { Pressable, Text, StyleSheet } from 'react-native';

export default function Button({ title, onPress }) {
  return (
    <Pressable
      style={styles.button}
      onPress={onPress}
      android_ripple={{ color: 'rgba(255,255,255,0.3)' }}
    >
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#6200EE',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 4,
    elevation: 2,
  },
  text: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '500',
    textTransform: 'uppercase',
    letterSpacing: 1,
  },
});

Import automatycznie wybierze właściwy plik:

import Button from './components/Button';
// Na iOS załaduje Button.ios.tsx
// Na Android załaduje Button.android.tsx

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Brama Atlantydy</Text>
      <View style={styles.button}>
        <Text style={styles.buttonText}>Otwórz wrota</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1a5276',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 20,
  },
  button: {
    paddingVertical: 14,
    paddingHorizontal: 28,
    // TODO: użyj Platform.select, aby ustawić borderRadius na 12 dla iOS i 4 dla android.
    //   Składnia: borderRadius: Platform.select({ ios: 12, android: 4 }),
    // TODO: użyj Platform.select, aby ustawić backgroundColor na '#007AFF' dla iOS
    //   i '#6200EE' dla android.
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});