ReactNative/shadow props

Shadow Props

مثال

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 الرسميّ