Bagaimanakah anda menulis kod khusus platform dalam React Native?

Question

Accepted Answer

Walaupun React Native berkongsi kebanyakan kod merentas iOS dan Android, kadangkala anda memerlukan kod atau penggayaan **khusus platform** — untuk tingkah laku, reka bentuk, atau keupayaan platform yang berbeza. React Native menyediakan modul **Platform** dan sambungan fail khusus platform untuk ini.

## Modul 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` menyemak platform; `Platform.select` memilih nilai bagi setiap platform — untuk tingkah laku dan penggayaan bersyarat.

## Fail khusus platform

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

## Bila dan bagaimana menggunakannya

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

## Mengapa ia penting

Memahami cara menulis kod khusus platform adalah berharga kerana **walaupun aplikasi merentas platform kadangkala memerlukan tingkah laku atau penggayaan khusus platform**, jadi mengendalikannya dengan betul ialah pengetahuan praktikal yang berguna untuk aplikasi React Native sebenar.

Walaupun nilai React Native ialah berkongsi kebanyakan kod merentas iOS dan Android, aplikasi sebenar kadangkala perlu **menyimpang mengikut platform** — untuk konvensyen reka bentuk platform (estetika iOS lwn Android/Material), ciri atau API khusus platform, perbezaan tingkah laku, atau UX yang sesuai platform — dan memahami cara mengendalikan ini adalah penting.

**Modul Platform** (`Platform.OS` untuk menyemak platform dan `Platform.select` untuk memilih nilai bagi setiap platform) mengendalikan perbezaan kecil secara inline — tingkah laku dan penggayaan bersyarat. **Fail khusus platform** (menggunakan sambungan `.ios.js` dan `.android.js`, dengan React Native memilih fail yang betul secara automatik) mengendalikan perbezaan yang lebih besar dengan kemas (pelaksanaan berasingan dan bukannya banyak syarat).

Memahami **bila dan bagaimana menggunakan ini** mencerminkan pertimbangan yang baik: menggunakan kod khusus platform **secara berhemat** (berkongsi kod secara lalai dan menyimpang hanya apabila benar-benar diperlukan — memelihara faedah merentas platform React Native), memilih modul Platform untuk perbezaan kecil berbanding fail khusus platform untuk yang besar, dan secara kritikal **menguji pada kedua-dua platform** (kerana ciri yang berfungsi pada satu mungkin berbeza atau rosak pada yang lain — isu sebenar yang biasa).

Pendekatan seimbang ini (kongsi secara lalai, menyimpang dengan teliti apabila diperlukan, uji kedua-duanya) mencerminkan pembangunan merentas platform yang matang.

Memandangkan aplikasi merentas platform kadangkala secara sah memerlukan kod khusus platform (untuk konvensyen, ciri, atau UX) dan mengendalikannya dengan baik (alat yang betul digunakan secara berhemat, dengan ujian kedua-dua platform) adalah penting untuk aplikasi berkualiti, dan memandangkan memahami modul Platform dan fail khusus platform membolehkan ini, memahami cara menulis kod khusus platform dalam React Native adalah pengetahuan yang berharga dan relevan secara praktikal — berguna untuk mengendalikan perbezaan platform yang timbul dalam aplikasi sebenar sambil memelihara perkongsian kod merentas platform yang menjadikan React Native berharga, mencerminkan pembangunan merentas platform yang teliti.