Как написать платформоспецифичный код в React Native?

Question

Accepted Answer

React Native позволяет использовать большую часть кода на iOS и Android, но иногда требуется **платформоспецифичный** код или стили — для различного поведения платформ, дизайна или возможностей. React Native предоставляет модуль **Platform** и расширения файлов для конкретных платформ.

## Модуль Platform

```jsx
import { Platform } from 'react-native';

// check the current platform
if (Platform.OS === 'ios') { /* iOS-specific */ }
else if (Platform.OS === 'android') { /* Android-specific */ }

// Platform.select — pick a value per platform
const styles = {
  padding: Platform.OS === 'ios' ? 20 : 16,
  ...Platform.select({
    ios: { fontFamily: 'Helvetica' },
    android: { fontFamily: 'Roboto' },
  }),
};
```

`Platform.OS` проверяет платформу; `Platform.select` выбирает значения для каждой платформы — для условного поведения и стилизации.

## Файлы, специфичные для платформы

```text
→ Create separate files per platform using extensions:
  Button.ios.js   → used on iOS
  Button.android.js → used on Android
  import Button from './Button'   → RN automatically picks the right file per platform
→ Good for substantially different platform implementations (cleaner than lots of if-checks)
```

## Когда и как это использовать

```text
✓ Use platform-specific code SPARINGLY — share code by default; diverge only when needed
✓ Common reasons: platform design conventions (iOS vs Material), platform-specific
  features/APIs, behavior differences, platform-appropriate UX
✓ Platform module for small differences; .ios/.android files for large differences
✓ Test on BOTH platforms (a feature working on one may differ/break on the other)
```

## Почему это важно

Понимание того, как писать платформоспецифичный код, ценно, потому что **даже кроссплатформенные приложения иногда требуют платформоспецифичного поведения или стилизации**, поэтому правильное использование этого — полезное практическое знание для реальных приложений React Native.

Хотя ценность React Native заключается в совместном использовании большей части кода на iOS и Android, реальные приложения иногда должны **отличаться в зависимости от платформы** — для соблюдения конвенций дизайна платформы (эстетика iOS против Android/Material), платформоспецифичных функций или API, различий в поведении или соответствующего пользовательскому опыту UX — и понимание того, как это обрабатывать, важно.

**Модуль Platform** (`Platform.OS` для проверки платформы и `Platform.select` для выбора значений для каждой платформы) обрабатывает небольшие различия встроенной функцией — условное поведение и стилизация. **Файлы, специфичные для платформы** (с использованием расширений `.ios.js` и `.android.js`, при этом React Native автоматически выбирает нужный файл) чистым образом обрабатывают большие различия (отдельные реализации вместо множества условных выражений).

Понимание **когда и как использовать это** отражает хороший судебный процесс: использование платформоспецифичного кода **редко** (общий доступ кода по умолчанию и расхождения только при необходимости — сохранение кроссплатформенного преимущества React Native), выбор модуля Platform для небольших различий в сравнении с файлами, специфичными для платформы, для больших, и принципиально важное **тестирование на обеих платформах** (так как функция, работающая на одной, может отличаться или сломаться на другой — частая реальная проблема).

Этот сбалансированный подход (совместное использование по умолчанию, продуманные расхождения при необходимости, тестирование обоих) отражает зрелую кроссплатформенную разработку.

Поскольку кроссплатформенные приложения иногда законно требуют платформоспецифичного кода (для конвенций, функций или UX) и правильное его использование (правильные инструменты, используемые редко, с тестированием обеих платформ) важно для качественных приложений, и поскольку понимание модуля Platform и файлов, специфичных для платформы, это позволяет, понимание того, как писать платформоспецифичный код в React Native, является ценным, практически релевантным знанием — полезным для обработки различий платформ, которые возникают в реальных приложениях, при этом сохраняя совместное использование кроссплатформенного кода, которое делает React Native ценным, отражая продуманную кроссплатформенную разработку.