كتابة شيفرة حسب المنصة في React Native

عند إنشاء تطبيقٍ متعدّد المنصّات (أو عابرٍ للمنصّات: cross-platform)، ستحتاج إلى إعادة استخدام أكبر قدر ممكن من الشيفرة. لكن يُمكن أحيانًا أن يكون اختلاف الشيفرة حسب المنصّة منطقيًّا، فقد ترغب مثلًا بإنشاء مكونات مرئية منفصلة لنظامي التشغيل iOS و Android، بحيث يختلف مظهر التطبيق حسب نظام المستخدم.

يقدم React Native طريقتين لتنظيم الشيفرة وفصلها حسب المنصّة بسهولة:

• استخدام وحدة ‎Platform‎.
• استخدام امتدادات ملفّات (file extensions) محدّدة حسب المنصّة.

قد تحتوي بعض المكوّنات على خاصيّات تعمل على منصّة واحدة فقط. تُوضَع تعليقات لجميع هذه الخاصيّات باستخدام العلامة ‎@platform‎ إضافةً إلى شارة صغيرة بجوارها على توثيق المشروع.

الوحدة Platform

يوفر React Native وحدةً تكتشف المنصّة التي يعمل عليها التطبيق. يمكنك استخدامها لكتابة شيفرة خاصّة بكل منصّة. استخدم هذا الخيار عندما تختلف أجزاءٌ صغيرةٌ فقط من المكوّن حسب المنصّة.

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

ستُساوي قيمةُ Platform.OS القيمةَ ‎ios‎ عند تشغيل التطبيق على iOS والقيمةَ ‎android‎ عند تشغيله على منصّة Android.

يُمكنك كذلك الاعتماد على التابع Platform.select، والذي يُعطى كائنًا يحتوي على قيمتي Platform.OS كمفاتيح، ويُعيدُ القيمة حسب المنصّة التي يشتغل عليها التطبيق.

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

ستُنتِج الشيفرة أعلاه حاويةً ذات النمط ‎flex: 1‎ على كلا المنصّتين، مع خلفية حمراء على منصّة iOS، وخلفية زرقاء على Android.

ولأنه يقبل أي قيمةٍ كيفما كانت، فيمكنك أيضًا استخدام هذا التابع لإعادة مكوّنٍ كاملٍ حسب المنصّة كما هو موضّح أسفله:

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;

اكتشاف نسخة Android

يمكن على نظام التشغيل Android استخدام الوحدة ‎Platform‎ للحصول على نسخة النظام الذي يعمل عليه التطبيق:

import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

اكتشاف نسخة iOS

على نظام التشغيل iOS، قيمة ‎Version‎ هي نتيجة ‎-[UIDevice systemVersion]‎، وهي سلسلة نصيّة (string) تحتوي على نسخة نظام التشغيل الحاليّة. مثلًا يُمكن لنسخة النظام أن تساويَ السلسلة النصيّة ‎"10.3"‎. وللحصول على رقم النسخة الرئيسي (major version number) على iOS، فيُمكنك استخدام الدالة ‎parseInt‎:

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

امتدادات الملفات حسب المنصة

إن كانت الشيفرة البرمجية الخاصة بالمنصّة لديك أكثر تعقيدًا، فسيتوجّب عليك تقسيم الشيفرة إلى ملفات منفصلة. سيكتشف React Native امتداد الملفّ ‎.ios.‎ أو ‎.android.‎ وسيُحمّل الملف المناسب عندما تتطلّبه (‎require‎) المكوّنات الأخرى.

لنقل مثلًا أنّ مشروعك يحتوي على الملفات التاليّة:

BigButton.ios.js
BigButton.android.js

يُمكنك استيراد المكوّن كما يلي:

const BigButton = require('./BigButton');

سيختار React Native الملفّ الصحيح تلقائيًا حسب النظام المُشغَّل.

إذا كنت تعتمد على شيفرة React Native الخاصّة بك في تطبيق ويب كذلك، فيمكنك أيضًا استخدام الاسم ‎BigButton.native.js‎ ليُستخدَم من طرف كلّ من iOS وAndroid، بينما سيستخدم تطبيق الويب الملفّ ‎BigButton.js‎.

مصادر

• صفحة Platform Specific Code في توثيق React Native الرسمي.