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)

هذه الخاصيّات لمنصّة iOS فقط، ويمكن استخدام elevation Property لمنصّة Android للحصول على خاصّياتٍ مماثلةٍ.

`shadowColor`

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

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

`shadowOffset`

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

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

`shadowOpacity`

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

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

`shadowRadius`

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

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

مصادر

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