الواجهة Platform في React Native

إليك المثال التالي (تجربة حية):

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

const App = () => {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text>OS</Text>
      <Text style={styles.value}>{Platform.OS}</Text>
      <Text>OS Version</Text>
      <Text style={styles.value}>{Platform.Version}</Text>
      <Text>isTV</Text>
      <Text style={styles.value}>{Platform.isTV.toString()}</Text>
      {Platform.OS === 'ios' && <>
        <Text>isPad</Text>
        <Text style={styles.value}>{Platform.isPad.toString()}</Text>
      </>}
      <Text>Constants</Text>
      <Text style={styles.value}>
        {JSON.stringify(Platform.constants, null, 2)}
      </Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  value: {
    fontWeight: '600',
    padding: 4,
    marginBottom: 8
  }
});

export default App;

الخاصيات

constants

Platform.constants;

تعيد هذه الخاصية كائنًا يحتوي على جميع الثوابت المشتركة والمحددة المتاحة والمتعلقة بالمنصة platform.

خاصيات الكائن:

الاسم	النوع	اختياري	الوصف
isTesting	قيمة منطقية boolean	لا
reactNativeVersion	كائن object	لا	معلومات حول إصدار React Native. المفاتيح هي major و minor و patch مع prerelease الاختياري والقيم هي أعداد number.
Version (Android)	عدد number	لا	ثابت إصدار نظام التشغيل وهو خاص بنظام Android.
Release (Android)	سلسلة نصية string	لا
Serial (Android)	سلسلة نصية string	لا	رقم العتاد التسلسلي لجهاز Android.
Fingerprint (Android)	سلسلة نصية string	لا	سلسلة نصية تحدد البناء بصورة فريدة.
Model (Android)	سلسلة نصية string	لا	اسم المستخدم النهائي المرئي لجهاز Android.
Brand (Android)	سلسلة نصية string	لا	علامة المستهلك التجارية المرئية التي سيرتبط المنتج / العتاد بها.
Manufacturer Android	سلسلة نصية string	لا	الشركة المصنعة لجهاز Android.
ServerHost (Android)	سلسلةنصية string	نعم
uiMode (Android)	سلسلة نصية string	لا	القيم الممكنة: 'car' و 'desk' و 'normal' و 'tv' و 'watch' و 'unknown'. اطّلع على المزيد حول Android ModeType.
forceTouchAvailable (iOS)	قيمة منطقية boolean	لا	تحدّد توفر اللمس ثلاثي الأبعاد 3D Touch على الجهاز.
interfaceIdiom (iOS)	سلسلة نصية string	لا	نوع واجهة الجهاز. اطّلع على المزيد حول UIUserInterfaceIdiom.
osVersion (iOS)	سلسلة نصية string	لا	ثابت إصدار نظام التشغيل وهو خاص بنظام iOS.
systemName (iOS)	سلسلة نصية string	لا	ثابت اسم نظام التشغيل وهو خاص بنظام iOS.

isPad

Platform.isPad;

تعيد هذه الخاصية قيمة منطقية تحدد إذا كان الجهاز عبارة عن جهاز iPad.

النوع	المنصة
قيمة منطقية boolean	iOS

isTV

Platform.isTV;

تعيد هذه الخاصية قيمة منطقية تحدد ما إذا كان الجهاز عبارة عن تلفزيون TV.

النوع
قيمة منطقية boolean

isTesting

Platform.isTesting;

تعيد هذه الخاصية قيمة منطقية تحدد ما إذا كان التطبيق يعمل في وضع المطور مع ضبط راية الاختبار.

النوع
قيمة منطقية boolean

OS

static Platform.OS

تعيد هذه الخاصية قيمة السلسلة النصية التي تمثل نظام التشغيل الحالي.

النوع
('android', 'ios')

Version

Platform.Version;

تعيد هذه الخاصية إصدار نظام التشغيل.

النوع
عدد number في نظام Android سلسلة نصية string في نظام iOS

التوابع

select()‎

static select(config: object): any

يعيد هذا التابع القيمة الأنسب للمنصة التي تعمل عليها حاليًا.

المعاملات Parameters:

الاسم	النوع	مطلوب	الوصف
config	كائن object	نعم	اطّلع على وصف config أدناه

اختر التابع الذي يعيد القيمة الأنسب للمنصة التي تعمل عليها حاليًا، وهذا يعني أنه إن عملت على هاتف، فستحظى مفاتيح android و ios بالأفضلية. إذا لم تُحدَّد هذه المفاتيح، فسيُستخدَم المفتاح native ثم المفتاح default.

المعامل config هو كائن له المفاتيح التالية:

• android (نوعه any)
• ios (نوعه any)
• native (نوعه any)
• default (نوعه any)

مثال عن كيفية الاستخدام:

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      android: {
        backgroundColor: 'green'
      },
      ios: {
        backgroundColor: 'red'
      },
      default: {
        // المنصات الأخرى كالويب مثلُا
        backgroundColor: 'blue'
      }
    })
  }
});

سينتج عن ذلك أن تكون الحاوية flex: 1 على جميع المنصات، ولون خلفية أخضر على نظام Android، ولون خلفية أحمر على نظام iOS، ولون خلفية أزرق على المنصات الأخرى. بما أن قيمة مفتاح المنصة المقابل يمكن أن تكون من النوع any، لذلك يمكن أيضًا استخدام التابع select لإعادة المكونات الخاصة بالمنصة كما يلي:

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

<Component />;

const Component = Platform.select({
  native: () => require('ComponentForNative'),
  default: () => require('ComponentForWeb')
})();

<Component />;

مصادر

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