Come scrivi codice platform-specific in React Native?

Question

Accepted Answer

Sebbene React Native condivida la maggior parte del codice tra iOS e Android, a volte hai bisogno di **codice o styling platform-specific** — per comportamenti, design o capacità diverse tra piattaforme. React Native fornisce il modulo **Platform** e estensioni di file platform-specific per questo.

## Il modulo 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` verifica la piattaforma; `Platform.select` seleziona valori per piattaforma — per comportamento condizionale e styling.

## File platform-specific

```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)
```

## Quando e come usarlo

```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)
```

## Perché è importante

Capire come scrivere codice platform-specific è prezioso perché **anche le app cross-platform a volte hanno bisogno di comportamento o styling platform-specific**, quindi gestirlo correttamente è una conoscenza pratica utile per vere app React Native.

Mentre il valore di React Native è condividere la maggior parte del codice tra iOS e Android, le app reali a volte hanno bisogno di **divergere per piattaforma** — per convenzioni di design platform-specific (estetica iOS vs Android/Material), API o feature platform-specific, differenze di comportamento, o UX appropriata per la piattaforma — e capire come gestire questo è importante.

Il **modulo Platform** (`Platform.OS` per verificare la piattaforma e `Platform.select` per selezionare valori per piattaforma) gestisce piccole differenze inline — comportamento condizionale e styling. **File platform-specific** (usando estensioni `.ios.js` e `.android.js`, con React Native che seleziona automaticamente il file giusto) gestiscono differenze più grandi in modo pulito (implementazioni separate piuttosto che molti condizionali).

Capire **quando e come usare questi** riflette buon giudizio: usare codice platform-specific **raramente** (condividere codice per default e divergere solo quando veramente necessario — preservando il beneficio cross-platform di React Native), scegliere il modulo Platform per piccole differenze versus file platform-specific per differenze grandi, e crucialmente **testare su entrambe le piattaforme** (poiché una feature che funziona su una potrebbe differire o rompersi sull'altra — un problema reale comune).

Questo approccio equilibrato (condividere per default, divergere con consapevolezza quando necessario, testare entrambe) riflette sviluppo cross-platform maturo.

Poiché le app cross-platform a volte legittimamente hanno bisogno di codice platform-specific (per convenzioni, feature, o UX) e gestirlo bene (i giusti strumenti usati raramente, con testing su entrambe le piattaforme) è importante per app di qualità, e poiché capire il modulo Platform e i file platform-specific abilita questo, capire come scrivere codice platform-specific in React Native è una conoscenza preziosa e praticamente rilevante — utile per gestire le differenze di piattaforma che emergono in app reali preservando la condivisione di codice cross-platform che rende React Native prezioso, riflettendo sviluppo cross-platform consapevole.