Hvordan skriver du platformspecifik kode i React Native?

Question

Accepted Answer

Selvom React Native deler det meste af koden på iOS og Android, har du nogle gange brug for **platformspecifik** kode eller styling — for forskellige platformadfærd, designs eller muligheder. React Native tilbyder **Platform**-modulet og platformspecifikke filendelser til dette formål.

## Platform-modulet

```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` kontrollerer platformen; `Platform.select` vælger værdier pr. platform — for betinget adfærd og styling.

## Platformspecifikke filer

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

## Hvornår og hvordan du bruger det

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

## Hvorfor det betyder noget

At forstå, hvordan man skriver platformspecifik kode, er værdifuldt, fordi **selv tværplatformsapps nogle gange har brug for platformspecifik adfærd eller styling**, så det er praktisk viden at håndtere det korrekt i rigtige React Native-apps.

Selvom React Natives værdi er at dele det meste af koden på iOS og Android, har rigtige apps nogle gange brug for at **afvige pr. platform** — for platformdesignkonventioner (iOS vs Android/Material-æstetik), platformspecifikke funktioner eller API'er, adfærdsforskellighedeller platformpassende UX — og det er vigtigt at forstå, hvordan man håndterer dette.

**Platform-modulet** (`Platform.OS` til at kontrollere platformen og `Platform.select` til at vælge værdier pr. platform) håndterer små forskelle indebygget — betinget adfærd og styling. **Platformspecifikke filer** (ved hjælp af `.ios.js` og `.android.js`-udvidelser, hvor React Native automatisk vælger den rigtige fil) håndterer større forskelle på en ren måde (separate implementeringer i stedet for mange betingelser).

At forstå **hvornår og hvordan du bruger disse** afspejler god dømmekraft: at bruge platformspecifik kode **sparsomt** (dele kode som standard og afvige kun, når det er genuint nødvendigt — bevar React Natives tværplatformsfordel), vælge Platform-modulet for små forskelle versus platformspecifikke filer for store, og vigtigst **test på begge platforme** (da en funktion, der virker på den ene, kan være anderledes eller bryde på den anden — et almindeligt reelt problem).

Denne balancerede tilgang (del som standard, afvige tankefuldt når nødvendigt, test begge) afspejler moden tværplatformudvikling.

Da tværplatformsapps nogle gange legitimt har brug for platformspecifik kode (for konventioner, funktioner eller UX) og håndtering af det godt (de rigtige værktøjer brugt sparsomt, med testning på begge platforme) er vigtig for kvalitetsapps, og da forståelse af Platform-modulet og platformspecifikke filer muliggør dette, er forståelse af, hvordan man skriver platformspecifik kode i React Native, værdifuld, praktisk relevant viden — brugbar til at håndtere de platformforskellighedeer, der opstår i rigtige apps, mens man bevarer den tværplatformskodedeling, der gør React Native værdifuldt, og afspejler tankesom udvikling på tværs af platforme.