คุณเขียนโค้ดเฉพาะแพลตฟอร์ม (platform-specific) ใน 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)
```

## ทำไมจึงสำคัญ

การเข้าใจวิธีเขียนโค้ดเฉพาะแพลตฟอร์มมีคุณค่า เพราะ **แม้แต่แอป cross-platform บางครั้งก็ต้องการพฤติกรรมหรือสไตล์เฉพาะแพลตฟอร์ม** ดังนั้นการจัดการมันอย่างถูกต้องจึงเป็นความรู้เชิงปฏิบัติที่เป็นประโยชน์สำหรับแอป React Native จริง

แม้คุณค่าของ React Native คือการแชร์โค้ดส่วนใหญ่ระหว่าง iOS และ Android แต่แอปจริงบางครั้งต้อง **แตกต่างตามแพลตฟอร์ม** — สำหรับ convention ของดีไซน์แพลตฟอร์ม (สุนทรียะแบบ iOS เทียบกับ Android/Material), ฟีเจอร์หรือ API เฉพาะแพลตฟอร์ม, ความแตกต่างของพฤติกรรม หรือ UX ที่เหมาะกับแพลตฟอร์ม — และการเข้าใจวิธีจัดการสิ่งนี้เป็นเรื่องสำคัญ

**โมดูล Platform** (`Platform.OS` เพื่อตรวจสอบแพลตฟอร์ม และ `Platform.select` เพื่อเลือกค่าตามแพลตฟอร์ม) จัดการความแตกต่างเล็ก ๆ แบบ inline — พฤติกรรมและสไตล์แบบมีเงื่อนไข **ไฟล์เฉพาะแพลตฟอร์ม** (ใช้นามสกุล `.ios.js` และ `.android.js` โดย React Native เลือกไฟล์ที่ถูกต้องอัตโนมัติ) จัดการความแตกต่างที่ใหญ่ขึ้นได้อย่างสะอาด (การ implement แยกกันแทนเงื่อนไขจำนวนมาก)

การเข้าใจ **เมื่อไรและอย่างไรที่ควรใช้สิ่งเหล่านี้** สะท้อนถึงวิจารณญาณที่ดี: ใช้โค้ดเฉพาะแพลตฟอร์ม **อย่างประหยัด** (แชร์โค้ดเป็นค่าเริ่มต้นและแตกต่างเฉพาะเมื่อจำเป็นจริง ๆ — รักษาประโยชน์ cross-platform ของ React Native), เลือกโมดูล Platform สำหรับความต่างเล็ก ๆ เทียบกับไฟล์เฉพาะแพลตฟอร์มสำหรับความต่างใหญ่ ๆ และสำคัญยิ่งคือ **ทดสอบบนทั้งสองแพลตฟอร์ม** (เพราะฟีเจอร์ที่ทำงานบนแพลตฟอร์มหนึ่งอาจต่างหรือพังบนอีกแพลตฟอร์ม — ปัญหาจริงที่พบบ่อย)

แนวทางที่สมดุลนี้ (แชร์เป็นค่าเริ่มต้น แตกต่างอย่างรอบคอบเมื่อจำเป็น ทดสอบทั้งสอง) สะท้อนถึงการพัฒนา cross-platform ที่เป็นผู้ใหญ่

เนื่องจากแอป cross-platform บางครั้งจำเป็นต้องใช้โค้ดเฉพาะแพลตฟอร์มอย่างชอบธรรม (สำหรับ convention, ฟีเจอร์ หรือ UX) และการจัดการมันให้ดี (ใช้เครื่องมือที่ถูกต้องอย่างประหยัด พร้อมทดสอบทั้งสองแพลตฟอร์ม) เป็นเรื่องสำคัญต่อแอปคุณภาพ และเนื่องจากการเข้าใจโมดูล Platform และไฟล์เฉพาะแพลตฟอร์มทำให้ทำสิ่งนี้ได้ ดังนั้นการเข้าใจวิธีเขียนโค้ดเฉพาะแพลตฟอร์มใน React Native จึงเป็นความรู้ที่มีคุณค่าและเกี่ยวข้องเชิงปฏิบัติ — มีประโยชน์ต่อการจัดการความแตกต่างของแพลตฟอร์มที่เกิดขึ้นในแอปจริง ขณะที่ยังรักษาการแชร์โค้ด cross-platform ที่ทำให้ React Native มีคุณค่า สะท้อนถึงการพัฒนา cross-platform ที่รอบคอบ