خاصيات الظل (Shadow Props) في React Native

خاصيات الظل (Shadow Props) لمكونات React Native.

مثال

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

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

const ShadowPropSlider = ({ label, value, ...props }) => {
  return (
    <>
      <Text>
        {label} ({value.toFixed(2)})
      </Text>
      <Slider step={1} value={value} {...props} />
    </>
  );
}

const App = () => {
  const [shadowOffsetWidth, setShadowOffsetWidth] = useState(0);
  const [shadowOffsetHeight, setShadowOffsetHeight] = useState(0);
  const [shadowRadius, setShadowRadius] = useState(0);
  const [shadowOpacity, setShadowOpacity] = useState(0.1);

  return (
    <View style={styles.container}>
      <View
        style={[
          styles.square,
          {
            shadowOffset: {
              width: shadowOffsetWidth,
              height: -shadowOffsetHeight
            },
            shadowOpacity,
            shadowRadius
          }
        ]}
      />
      <View style={styles.controls}>
        <ShadowPropSlider
          label="shadowOffset - X"
          minimumValue={-50}
          maximumValue={50}
          value={shadowOffsetWidth}
          onValueChange={val => setShadowOffsetWidth(val)}
        />
        <ShadowPropSlider
          label="shadowOffset - Y"
          minimumValue={-50}
          maximumValue={50}
          value={shadowOffsetHeight}
          onValueChange={val => setShadowOffsetHeight(val)}
        />
        <ShadowPropSlider
          label="shadowRadius"
          minimumValue={0}
          maximumValue={100}
          value={shadowRadius}
          onValueChange={val => setShadowRadius(val)}
        />
        <ShadowPropSlider
          label="shadowOpacity"
          minimumValue={0}
          maximumValue={1}
          step={0.05}
          value={shadowOpacity}
          onValueChange={val => setShadowOpacity(val)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  square: {
    alignSelf: "center",
    backgroundColor: "white",
    borderRadius: 4,
    height: 150,
    shadowColor: "black",
    width: 150
  },
  controls: {
    paddingHorizontal: 12
  }
});

export default App;

الخاصيات (Props)

shadowColor

تُستخدم هذه الخاصيّة لتحديد لون color الظّل الهابط (drop shadow).

هذه الخاصية ستعمل على الإصدار 28 من واجهة منصة Android، ويمكن استخدام الخاصّية elevation لإصدارات سابقة.

النوع	مطلوب
لون (color)	لا

shadowOffset

تُستخدم لتحديد إزاحة (offset) الظلّ الهابط.

النوع	مطلوب	المنصة
كائن {width:number,height:number}	لا	iOS

shadowOpacity

تُستخدم لتحديد مدى عَتْمَة الظل الهابط (مضروبًا بالعنصر alpha الخاصّ باللّون).

النوع	مطلوب	المنصة
عدد (number)	لا	iOS

shadowRadius

تُستخدم لتحديد نصف قطر ضبابية (blur) الظل الهابط.

النوع	مطلوب	المنصة
عدد (number)	لا	iOS

مصادر

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