كتابة شيفرة حسب المنصة في React Native
عند إنشاء تطبيقٍ متعدّد المنصّات (أو عابرٍ للمنصّات: cross-platform)، ستحتاج إلى إعادة استخدام أكبر قدر ممكن من الشيفرة. لكن يُمكن أحيانًا أن يكون اختلاف الشيفرة حسب المنصّة منطقيًّا، فقد ترغب مثلًا بإنشاء مكونات مرئية منفصلة لنظامي التشغيل iOS وAndroid، بحيث يختلف مظهر التطبيق حسب نظام المستخدم.
يقدم React Native طريقتين لتنظيم الشيفرة وفصلها حسب المنصّة بسهولة:
قد تحتوي بعض المكوّنات على خاصيّات تعمل على منصّة واحدة فقط. تُوضَع تعليقات لجميع هذه الخاصيّات باستخدام العلامة @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.