Различия платформ: Platform

Один и тот же код работает на iOS, Android и в браузере, но иногда платформы нужно различать: тени рисуются по-разному, привычные жесты и отступы отличаются. Для этого есть модуль Platform и файлы с суффиксом платформы.

Platform.OS

Platform.OS — строка с названием платформы: 'ios', 'android' или 'web'.

// app/about.tsx
import { Platform, Text, View } from 'react-native';
 
export default function About() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Платформа: {Platform.OS}</Text>
      <Text>Версия системы: {Platform.Version}</Text>
    </View>
  );
}

На iPhone экран покажет ios и версию iOS, например 18.0, на Android — android и номер API, например 35, а в браузере — web.

Platform.select

Platform.select принимает объект с ключами платформ и возвращает значение для текущей. Удобно для стилей — например, тени у карточки статьи:

// components/PostCard.tsx
import { Platform, StyleSheet, Text, View } from 'react-native';
 
export default function PostCard({ title }: { title: string }) {
  return (
    <View style={styles.card}>
      <Text style={{ fontSize: 16 }}>{title}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    padding: 16,
    margin: 8,
    borderRadius: 8,
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 6 },
      android: { elevation: 3 },
      default: {},
    }),
  },
});

На iOS тень задаётся свойствами shadow*, на Android — одним числом elevation. На обеих платформах карточка будет выглядеть приподнятой над фоном. Ключ default срабатывает для остальных платформ, в том числе для веба.

Выведите карточки в renderItem списка статей вместо строк-ссылок: <PostCard title={item.title} />, обернув карточку в Pressable внутри Link с asChild, как в уроке о маршрутах.

Файлы для платформы

Если отличий много, делают два файла: components/Hint.ios.tsx и components/Hint.android.tsx. Импортируют их без суффикса:

// app/about.tsx
import Hint from '@/components/Hint';

Metro при сборке подставит нужный файл для каждой платформы. Для веба можно добавить Hint.web.tsx, а общий запасной вариант — просто Hint.tsx.

Частая ошибка

Проверять платформу только на ios и забывать про остальные:

// components/PostCard.tsx
// Неправильно: на Android и в вебе получится undefined.
const padding = Platform.select({ ios: 20 });

Если ключа для текущей платформы нет, Platform.select вернёт undefined, и стиль молча не применится. Всегда указывайте все нужные платформы или ключ default.