عرض مصدر ReactNative/shadow props

<noinclude>{{DISPLAYTITLE:خاصيات الظل (Shadow Props) في React Native}}</noinclude>
خاصيات الظل (Shadow Props) لمكونات React Native.

== مثال ==
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/shadow-props تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>

== الخاصيات (Props) ==
=== <code>shadowColor</code> ===
تُستخدم هذه الخاصيّة لتحديد لون [[ReactNative/colors|color]] الظّل الهابط (drop shadow).

هذه الخاصية ستعمل على الإصدار 28 من واجهة منصة Android، ويمكن استخدام الخاصّية [[ReactNative/view style props#elevation|elevation]]  لإصدارات سابقة.
{| class="wikitable"
!النوع
!مطلوب
|-
|لون ([[ReactNative/colors|color]])
|لا
|}

=== <code>shadowOffset</code> ===
تُستخدم لتحديد إزاحة (offset) الظلّ الهابط.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|كائن <code>{width:number,height:number}</code>
|لا
|iOS
|}

=== <code>shadowOpacity</code> ===
تُستخدم لتحديد مدى عَتْمَة الظل الهابط (مضروبًا بالعنصر alpha الخاصّ باللّون).
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد (number)
|لا
|iOS
|}

=== <code>shadowRadius</code> ===
تُستخدم لتحديد نصف قطر ضبابية (blur) الظل الهابط.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|عدد (number)
|لا
|iOS
|}

== مصادر ==

* [https://facebook.github.io/react-native/docs/shadow-props صفحة Shadow Props في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Component]]