كيف تكتب كود خاص بكل منصة في 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)، أو ميزات أو واجهات برمجية خاصة بكل منصة، أو اختلافات السلوك، أو UX مناسب لكل منصة — وفهم كيفية التعامل معها مهم.

**وحدة Platform** (`Platform.OS` للتحقق من المنصة و `Platform.select` لاختيار القيم لكل منصة) تتعامل مع الاختلافات الصغيرة مباشرة — السلوك الشرطي والتصميم. **ملفات خاصة بكل منصة** (باستخدام ملحقات `.ios.js` و `.android.js`، حيث يختار React Native تلقائياً الملف الصحيح) تتعامل مع الاختلافات الكبيرة بنظافة (تطبيقات منفصلة بدلاً من شروط كثيرة).

فهم **متى وكيف تستخدم هذه** يعكس حكماً جيداً: استخدام الكود الخاص بكل منصة **بحذر** (مشاركة الكود بشكل افتراضي والاختلاف فقط عند الحاجة الحقيقية — الحفاظ على فائدة React Native متعددة المنصات)، واختيار وحدة Platform للاختلافات الصغيرة مقابل ملفات خاصة بكل منصة للاختلافات الكبيرة، وبشكل حاسم **الاختبار على كلا المنصتين** (حيث قد تعمل الميزة على منصة واحدة لكن تختلف أو تتعطل على الأخرى — مشكلة حقيقية شائعة).

هذا النهج المتوازن (المشاركة بشكل افتراضي، الاختلاف بتفكير عندما يكون ضرورياً، الاختبار على كلا الجانبين) يعكس تطوير متعدد المنصات ناضجاً.

بما أن التطبيقات متعددة المنصات أحياناً تحتاج شرعياً إلى كود خاص بكل منصة (للاتفاقيات أو الميزات أو UX) والتعامل معها جيداً (الأدوات الصحيحة المستخدمة بحذر، مع اختبار كلا المنصتين) مهم لتطبيقات عالية الجودة، وبما أن فهم وحدة Platform وملفات خاصة بكل منصة يمكّن ذلك، فهم كيفية كتابة كود خاص بكل منصة في React Native هو معرفة مفيدة وعملية — مفيدة للتعامل مع الاختلافات بين المنصات التي تظهر في التطبيقات الحقيقية مع الحفاظ على مشاركة الكود متعدد المنصات التي تجعل React Native قيماً، مما يعكس تطوير متعدد المنصات مدروساً.