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

تُعَدّ الواجهة StyleSheet تجريدًا مشابهًا لتنسيقات CSS، وكمثالٍ عنها ما يلي (تجربة حية):

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default App;

نصائح لتحسين جودة الشّفرة البرمجيّة:

• إزالة التّنسيقات (styles) من تابع العرض (render) تجعل الشّفرة البرمجيّة سهلة الفهم.
• تعدّ تسمية التّنسيقات طريقةً جيّدةً لإعطاء معنىً للمكوّنات منخفضة المستوى (low level)، في تابع الإظهار.

التوابع

compose()‎

static compose(style1: object, style2: object): object | array<object>

يُستخدم هذا التابع لدمج تنسيقين، حيث يقوم style2 بإلغاء أيّ تنسيقاتٍ موجودةٍ في style1؛ أمّا في حال كان أحد التنسيقين غير صالح فسيعاد الآخر دون أي تخصيص في المصفوفة، مع حفظ التّخصيصات، والمحافظة على المساواة المرجعيّة (reference equality) من أجل فحوصات PureComponent. إليك المثال التالي (تجربة حية):

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

const App = () => (
  <View style={container}>
    <Text style={text}>React Native</Text>
  </View>
);

const page = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 30,
    color: '#000'
  },
});

const lists = StyleSheet.create({
  listContainer: {
    flex: 1,
    backgroundColor: '#61dafb',
  },
  listItem: {
    fontStyle: 'italic',
    fontWeight: 'bold'
  },
});

const container = StyleSheet.compose(page.container, lists.listContainer);
const text = StyleSheet.compose(page.text, lists.listItem);

export default App;

create()‎

static create(obj: object): object

يُستخدم هذا التابع لإنشاء مرجع تنسيق (StyleSheet) من الكائن المعطى.

flatten()‎

static flatten(style: array<object>): object

يُحوّل مصفوفة من كائنات التّنسيق إلى كائن تنسيقٍ واحدٍ، كما يمكن استخدامه للبحث عن المعرِّفات (IDs) المُعادة من StyleSheet.register.

ملاحظة: يجب توخي الحذر، لأنّ إساءة استخدام هذا التّابع سيؤثّر سلبًا على التّحسينات، فالمعرِّفات (IDs) تمكِّن التّحسينات من خلال الجسر، والذاكرة بشكلٍ عامٍّن لذا فالإشارة إلى كائنات التّنسيق بشكلٍ مباشرٍ ستؤدي إلى الحرمان من هذه التّحسينات.

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

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={page.container}>
    <Text style={flattenStyle}>React Native</Text>
    <Text>Flatten Style</Text>
    <Text style={page.code}>
      {JSON.stringify(flattenStyle, null, 2)}
    </Text>
  </View>
);

const page = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    alignItems: "center"
  },
  text: {
    color: "#000",
    fontSize: 14,
    fontWeight: "bold"
  },
  code: {
    marginTop: 12,
    padding: 12,
    borderRadius: 8,
    color: "#666",
    backgroundColor: "#eaeaea"
  }
});

const typography = StyleSheet.create({
  header: {
    color: "#61dafb",
    fontSize: 30,
    marginBottom: 36
  }
});

const flattenStyle = StyleSheet.flatten([
  page.text,
  typography.header
]);

export default App;

يستخدم هذا التابع ‎‏(StyleSheetRegistry.getStyleByID(style بشكلً ضمنيٍّ للحصول على كائنات التّنسيق الممثّلة بالمعرِّفات (IDs)، من مصفوفة كائنات التنسيق (الناتجة عن StyleSheet.create()‎)، وتجميعها ضمن كائنٍ وحيدٍ ثمّ إعادته. وهذا يشرح أيضًا الاستخدام البديل لهذا التابع.

setStyleAttributePreprocessor()‎

تحذير: تجريبيًّا قد تحدث التغيّرات العاجلة كثيرًا دون الإعلان عنها بشكلٍ موثوقٍ، وقد يحذف كلّ شيءٍ، من يعلم؟ لذا استخدم هذه الدّالة على مسؤوليّتك الشخصيّة.

static setStyleAttributePreprocessor(property: string, process: (propValue: any) => any)

يستخدم للمعالجة الأوليّة (pre-process) لقيم خاصيّات التّنسيق، ويستخدَم داخليًّا لمعالجة اللّون، وتحويل القيم، ويفضَّل عدم استخدمه إلّا إذا كنت تعلم ما الذي تفعله، وقد استنفدت الخيارات الأخرى.

الخاصيات (props)

absoluteFill

يعدّ إنشاء تراكباتٍ (overlays) ذات موقع مطلقٍ، وتوضُّع صفري، هو النّموذج الشائع (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0)، لذا يستخدم absoluteFill للملائمة، وتقليل تضاعف هذه التّنسيقات المتكرّرة، كما يستخدم لإنشاء مدخل مخصّصٍ ضمن التنسيقات (StyleSheet) كما في المثال التالي (تجربة حية):

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

const App = () => (
  <View style={styles.container}>
    <View style={styles.box1}>
      <Text style={styles.text}>1</Text>
    </View>
    <View style={styles.box2}>
      <Text style={styles.text}>2</Text>
    </View>
    <View style={styles.box3}>
      <Text style={styles.text}>3</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  box1: {
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
  box2: {
    ...StyleSheet.absoluteFill,
    width: 100,
    height: 100,
    backgroundColor: 'blue'
  },
  box3: {
    position: 'absolute',
    top: 120,
    left: 120,
    width: 100,
    height: 100,
    backgroundColor: 'green'
  },
  text: {
    color: '#FFF',
    fontSize: 80
  }
});

export default App;

absoluteFillObject

هي absoluteFill نفسها مع بعض التّعديلات، وتستخدَم لإنشاء مدخل مخصّصٍ ضمن التّنسيقات (StyleSheet) كما في المثال التالي (تجربة حية):

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

const App = () => (
  <View style={styles.container}>
    <View style={styles.box1}>
      <Text style={styles.text}>1</Text>
    </View>
    <View style={styles.box2}>
      <Text style={styles.text}>2</Text>
    </View>
    <View style={styles.box3}>
      <Text style={styles.text}>3</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  box1: {
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
  box2: {
    ...StyleSheet.absoluteFill,
    top: 120,
    left: 50,
    width: 100,
    height: 100,
    backgroundColor: 'blue'
  },
  box3: {
    ...StyleSheet.absoluteFillObject,
    top: 120,
    left: 120,
    width: 100,
    height: 100,
    backgroundColor: 'green'
  },
  text: {
    color: '#FFF',
    fontSize: 80
  }
});

export default App;

الفرق بين absoluteFill وabsoluteFillObject

حاليًا لا يوجد فرق في الاستخدام بين absoluteFill، وabsoluteFillObject.

hairlineWidth

تعرّف هذه الخاصية على أنها عَرْض الخطّ الرّفيع على المنصّة، ويمكن استخدامها كسماكة الحوافّ، أو الفاصل بين عنصرين. إليك المثال التالي (تجربة حية):

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.row}>React</Text>
    <Text style={styles.row}>Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24
  },
  row: {
    padding: 4,
    borderBottomColor: "red",
    borderBottomWidth: StyleSheet.hairlineWidth
  }
});

export default App;

سيكون هذا الثابت دائمًا تقريبًا لعدد البكسلات (لذا سيكون الخط المعرَّف به متعرّجًا)، وسيحاول مطابقة العرض المعياريّ للخطّ الرفيع على المنصّة التحتية (underlying platform). يجب ألا نعتمد على ثبات حجمه، إذ يمكن حساب قيمته بشكلٍ مختلفٍ باختلاف المنصّة، وكثافة الشّاشة. كما قد لا يظهر الخط الذي بعرض hairline على المحاكي، إذا كان هذا المحاكي مصغّرّا.

مصادر

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