الفرق بين المراجعتين ل"ReactNative/platform"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'== المكوّن Platform == === مثال عن واجهة برمجة تطبيقات المكوّن Platform === <syntaxhighlight lang="javascript"> import React from '...')
 
سطر 147: سطر 147:
  
 
==== <code>isPad</code> ‫(iOS) ====
 
==== <code>isPad</code> ‫(iOS) ====
 +
<syntaxhighlight lang="javascript">
 +
Platform.isPad;
 +
</syntaxhighlight>تعيد هذه الخاصية قيمة بوليانية تحدد إذا كان الجهاز عبارة عن جهاز iPad.
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|بولياني boolean
 +
|}
 +
 +
===== <code>isTV</code> =====
 +
<syntaxhighlight lang="javascript">
 +
Platform.isTV;
 +
</syntaxhighlight>تعيد هذه الخاصية قيمة بوليانية تحدد ما إذا كان الجهاز عبارة عن تلفزيون TV.
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|بولياني boolean
 +
|}
 +
 +
===== <code>isTesting</code> =====
 +
<syntaxhighlight lang="javascript">
 +
Platform.isTesting;
 +
</syntaxhighlight>تعيد هذه الخاصية قيمة بوليانية تحدد ما إذا كان التطبيق يعمل في وضع المطور مع ضبط راية الاختبار.
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|بولياني boolean
 +
|}
 +
 +
===== <code>OS</code> =====
 +
<syntaxhighlight lang="javascript">
 +
static Platform.OS
 +
</syntaxhighlight>تعيد هذه الخاصية قيمة السلسلة التي تمثل نظام التشغيل الحالي.
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|enum(<code>'android'</code>, <code>'ios'</code>)
 +
|}
 +
 +
===== <code>Version</code> =====
 +
<syntaxhighlight lang="javascript">
 +
Platform.Version;
 +
</syntaxhighlight>تعيد هذه الخاصية إصدار نظام التشغيل.
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|رقم number في نظام Android
 +
----سلسلة string في نظام iOS
 +
|}
 +
 +
==== التوابع ====
 +
 +
===== <code>select()‎</code> =====
 +
<syntaxhighlight lang="javascript">
 +
static select(config: object): any
 +
</syntaxhighlight>يعيد هذا التابع القيمة الأنسب للمنصة التي تعمل عليها حاليًا.
 +
 +
'''المعاملات Parameters''':
 +
{| class="wikitable"
 +
!الاسم
 +
!النوع
 +
!مطلوب
 +
!الوصف
 +
|-
 +
|config
 +
|كائن object
 +
|نعم
 +
|اطّلع على وصف config أدناه
 +
|}
 +
اختر التابع الذي يعيد القيمة الأنسب للمنصة التي تعمل عليها حاليًا، وهذا يعني أنه إن عملت على هاتف، فستحظى مفاتيح <code>android</code> و <code>ios</code> بالأفضلية. إذا لم تُحدَّد هذه المفاتيح، فسيُستخدَم المفتاح <code>native</code> ثم المفتاح <code>default</code>.
 +
 +
المعامل <code>config</code> هو كائن له المفاتيح التالية:
 +
 +
* <code>android</code> (نوعه any)
 +
* <code>ios</code> (نوعه any)
 +
* <code>native</code> (نوعه any)
 +
* <code>default</code> (نوعه any)
 +
 +
'''مثال عن كيفية الاستخدام''':<syntaxhighlight lang="javascript">
 +
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'
 +
      }
 +
    })
 +
  }
 +
});
 +
</syntaxhighlight>سينتج عن ذلك أن تكون الحاوية <code>flex: 1</code> على جميع المنصات، ولون خلفية أخضر على نظام Android، ولون خلفية أحمر على نظام iOS، ولون خلفية أزرق على المنصات الأخرى. بما أن قيمة مفتاح المنصة المقابل يمكن أن تكون من النوع <code>any</code>، لذلك يمكن أيضًا استخدام التابع <code>select</code> لإعادة المكونات الخاصة بالمنصة كما يلي:<syntaxhighlight lang="javascript">
 +
const Component = Platform.select({
 +
  ios: () => require('ComponentIOS'),
 +
  android: () => require('ComponentAndroid')
 +
})();
 +
 +
<Component />;
 +
</syntaxhighlight><syntaxhighlight lang="javascript">
 +
const Component = Platform.select({
 +
  native: () => require('ComponentForNative'),
 +
  default: () => require('ComponentForWeb')
 +
})();
 +
 +
<Component />;
 +
</syntaxhighlight>
 +
 +
== مصادر ==
 +
 +
* [https://reactnative.dev/docs/platform صفحة Platform في توثيق React Native الرسمي.]

مراجعة 23:11، 21 يونيو 2021

المكوّن 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 />;

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/platform&oldid=31074"