ReactNative/platform

المكوّن Platform

مثال عن واجهة برمجة تطبيقات المكوّن Platform

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;

الخصائص Properties

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 ‫(iOS)

Platform.isPad;

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

النوع
بولياني boolean

isTV

Platform.isTV;

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

النوع
بولياني boolean

isTesting

Platform.isTesting;

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

النوع
بولياني boolean

OS

static Platform.OS

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

النوع
enum('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: {
        // other platforms, web for example
        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 الرسمي.