الدالة PlatformColor في React Native

يمكنك استخدام الدالة PlatformColor للوصول إلى الألوان الأصيلة على المنصة الهدف من خلال توفير قيمة السلسلة النصية المقابلة للون الأصيل.

PlatformColor(color1, [color2, ...colorN]);

مرّر سلسلة إلى الدالة PlatformColor بشرط وجودها على هذه المنصة، وستعيد اللون الأصيل المقابل، والذي يمكنك تطبيقه في أي جزء من تطبيقك. إن مرّرت أكثر من قيمة سلسلة نصية واحدة إلى الدالة PlatformColor، فستتعامل مع القيمة الأولى على أنها القيمة الافتراضية وتتعامل مع القيم الباقية على أنها قيم احتياطية.

PlatformColor('bogusName', 'linkColor');

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

الألوان المدعومة

اطّلع على ما يلي للحصول على قائمة كاملة بأنواع ألوان الأنظمة المدعومة:

• في نظام Android:
  • R.attr: البادئة ‎?attr
  • R.color: البادئة ‎@android:color

• في نظام iOS (ترميزَي Objective-C و Swift):

ألوان UIColor المعيارية.

ألوان عنصر واجهة المستخدم UIColor.

ملاحظات المطور في الويب: إن كنت على دراية بتصميم الأنظمة، فهناك طريقة أخرى للتفكير في هذا الأمر وهي أن الدالة PlatformColor تتيح لك الاستفادة من الرموز اللونية لنظام التصميم المحلي بحيث يمكن مزج تطبيقك مزجًا صحيحًا.

مثال

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

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

const App = () => (
  <View style={styles.container}>
    <Text style={styles.label}>
      I am a special label color!
    </Text>
  </View>
);

const styles = StyleSheet.create({
  label: {
    padding: 16,
    ...Platform.select({
      ios: {
        color: PlatformColor('label'),
        backgroundColor:
          PlatformColor('systemTealColor'),
      },
      android: {
        color: PlatformColor('?android:attr/textColor'),
        backgroundColor:
          PlatformColor('@android:color/holo_blue_bright'),
      },
      default: { color: 'black' }
    })
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

export default App;

يجب أن تتطابق قيمة السلسلة النصية المقدَّمة إلى الدالة PlatformColor مع السلسلة الموجودة على المنصة الأصيلة حيث يُشغَّل التطبيق. يمكن تجنب أخطاء وقت التشغيل من خلال تغليف الدالة بفحص المنصة، إما عن طريق Platform.OS === 'platform'‎ أو Platform.select()‎ كما هو موضح في المثال السابق.

ملاحظة: يمكنك العثور على مثال كامل يوضح الاستخدام الصحيح والمحدد للدالة PlatformColor في PlatformColorExample.js.

مصادر

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