التحويلات (Transforms) في React Native

تعدّ التّحويلات (Transforms) هي من خاصيّات التنسيق (style) التي تساعد على تعديل مظهر المكوّنات، وموقعها، وذلك باستخدام التحويلات الثّنائيّة (2D)، أو الثّلاثيّة الأبعاد (3D). ولكن يبقى التّخطيط حول المكوِّن المحوَّل هو نفسه بعد تطبيق هذه التحويلات، لذا tقد يتداخل مع المكوّنات المجاورة، ويمكن تجنّب حدوث هذا التّداخل عن طريق إضافة هامشٍ للمكوِّن المحوَّل من جهة المكوّنات المجاورة، أو بإضافة مسافاتٍ فارغةٍ (padding) إلى الحاوية (container).

مثال

• مثال عن مكوّن دالّة (Function Component)

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

const App = () => (
  <SafeAreaView style={styles.container}>
    <ScrollView
      contentContainerStyle={styles.scrollContentContainer}
    >
      <View style={styles.box}>
        <Text style={styles.text}>Original Object</Text>
      </View>

      <View style={[styles.box, {
        transform: [{ scale: 2 }]
      }]}>
        <Text style={styles.text}>Scale by 2</Text>
      </View>

      <View style={[styles.box, {
        transform: [{ scaleX: 2 }]
      }]}>
        <Text style={styles.text}>ScaleX by 2</Text>
      </View>

      <View style={[styles.box, {
        transform: [{ scaleY: 2 }]
      }]}>
        <Text style={styles.text}>ScaleY by 2</Text>
      </View>

      <View style={[styles.box, {
        transform: [{ rotate: "45deg" }]
      }]}>
        <Text style={styles.text}>Rotate by 45 deg</Text>
      </View>

      <View style={[styles.box, {
        transform: [
          { rotateX: "45deg" },
          { rotateZ: "45deg" }
        ]
      }]}>
        <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
      </View>

      <View style={[styles.box, {
        transform: [
          { rotateY: "45deg" },
          { rotateZ: "45deg" }
        ]
      }]}>
        <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
      </View>

      <View style={[styles.box, {
        transform: [{ skewX: "45deg" }]
      }]}>
        <Text style={styles.text}>SkewX by 45 deg</Text>
      </View>

      <View style={[styles.box, {
        transform: [{ skewY: "45deg" }]
      }]}>
        <Text style={styles.text}>SkewY by 45 deg</Text>
      </View>

      <View style={[styles.box, {
        transform: [
          { skewX: "30deg" },
          { skewY: "30deg" }
        ]
      }]}>
        <Text style={styles.text}>Skew X&Y by 30 deg</Text>
      </View>

      <View style={[styles.box, {
        transform: [{ translateX: -50 }]
      }]}>
        <Text style={styles.text}>TranslateX by -50 </Text>
      </View>

      <View style={[styles.box, {
        transform: [{ translateY: 50 }]
      }]}>
        <Text style={styles.text}>TranslateY by 50 </Text>
      </View>
    </ScrollView>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  scrollContentContainer: {
    alignItems: "center",
    paddingBottom: 60
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    marginVertical: 40,
    backgroundColor: "#61dafb",
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    fontSize: 14,
    fontWeight: "bold",
    margin: 8,
    color: "#000",
    textAlign: "center"
  }
});

export default App;

• مثالٌ عن مكوّن صنف (Class Component)

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

class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView
          contentContainerStyle={styles.scrollContentContainer}
        >
          <View style={styles.box}>
            <Text style={styles.text}>Original Object</Text>
          </View>

          <View style={[styles.box, {
            transform: [{ scale: 2 }]
          }]}>
            <Text style={styles.text}>Scale by 2</Text>
          </View>

          <View style={[styles.box, {
            transform: [{ scaleX: 2 }]
          }]}>
            <Text style={styles.text}>ScaleX by 2</Text>
          </View>

          <View style={[styles.box, {
            transform: [{ scaleY: 2 }]
          }]}>
            <Text style={styles.text}>ScaleY by 2</Text>
          </View>

          <View style={[styles.box, {
            transform: [{ rotate: "45deg" }]
          }]}>
            <Text style={styles.text}>Rotate by 45 deg</Text>
          </View>

          <View style={[styles.box, {
            transform: [
              { rotateX: "45deg" },
              { rotateZ: "45deg" }
            ]
          }]}>
            <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
          </View>

          <View style={[styles.box, {
            transform: [
              { rotateY: "45deg" },
              { rotateZ: "45deg" }
            ]
          }]}>
            <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
          </View>

          <View style={[styles.box, {
            transform: [{ skewX: "45deg" }]
          }]}>
            <Text style={styles.text}>SkewX by 45 deg</Text>
          </View>

          <View style={[styles.box, {
            transform: [{ skewY: "45deg" }]
          }]}>
            <Text style={styles.text}>SkewY by 45 deg</Text>
          </View>

          <View style={[styles.box, {
            transform: [
              { skewX: "30deg" },
              { skewY: "30deg" }
            ]
          }]}>
            <Text style={styles.text}>Skew X&Y by 30 deg</Text>
          </View>

          <View style={[styles.box, {
            transform: [{ translateX: -50 }]
          }]}>
            <Text style={styles.text}>TranslateX by -50</Text>
          </View>

          <View style={[styles.box, {
            transform: [{ translateY: 50 }]
          }]}>
            <Text style={styles.text}>TranslateY by 50</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  scrollContentContainer: {
    alignItems: "center",
    paddingBottom: 60
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    marginVertical: 40,
    backgroundColor: "#61dafb",
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    fontSize: 14,
    fontWeight: "bold",
    margin: 8,
    color: "#000",
    textAlign: "center"
  }
});

export default App;

التوابع

transform()‎

يقبل مصفوفةً من كائنات التّحويل، حيث يحدّد كلّ كائنٍ الخاصيّة التي سيتمّ تحويلها على شكل (مفتاحٍ/القيمة المستخدمة في التحويل)، ويفضّل عدم دمج هذه الكائنات مع بعضها، كما يجب استخدام زوج وحيدٍ من (المفتاح/القيمة) لكلّ كائنٍ.

يتطلّب تحويل الدّوران دخلًا من نوع السّلاسل النّصية تحدَّد فيها زاوية الدّوران بالدّرجات (deg)، أو الرّاديان (rad)، كما هو موضّحٌ في المثال التّالي:

transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]);

يتطلب تحويل الإمالة (skew) دخلًا من نوع السّلاسل النّصّية تحدَّد فيها زاوية الدّوران بالدّرجات (deg)، كما هو موضّحٌ في المثال التّالي:

transform([{ skewX: '45deg' }]);

النوع	مطلوب
مصفوفة من الكائنات: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}	لا

decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY

مهملة: استخدم transform بدلًا عنها.

مصادر

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