الفرق بين المراجعتين ل"ReactNative/shadow props"
اذهب إلى التنقل
اذهب إلى البحث
رقية-بورية (نقاش | مساهمات) (تعديل رابط خاصية elevation) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
سطر 1: | سطر 1: | ||
− | <noinclude>{{DISPLAYTITLE:Shadow Props في React Native}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:خاصيات الظل (Shadow Props) في React Native}}</noinclude> |
− | + | خاصيات الظل (Shadow Props) لمكونات React Native. | |
+ | |||
== مثال == | == مثال == | ||
− | <syntaxhighlight lang="javascript"> | + | إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/shadow-props تجربة حية]):<syntaxhighlight lang="javascript"> |
import React, { useState } from "react"; | import React, { useState } from "react"; | ||
import { Text, View, StyleSheet, Slider } from "react-native"; | import { Text, View, StyleSheet, Slider } from "react-native"; | ||
− | + | ||
const ShadowPropSlider = ({ label, value, ...props }) => { | const ShadowPropSlider = ({ label, value, ...props }) => { | ||
− | + | return ( | |
− | + | <> | |
− | + | <Text> | |
− | + | {label} ({value.toFixed(2)}) | |
− | + | </Text> | |
− | + | <Slider step={1} value={value} {...props} /> | |
− | + | </> | |
); | ); | ||
} | } | ||
− | + | ||
const App = () => { | 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({ | 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; | export default App; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== الخاصيات (Props) == | == الخاصيات (Props) == | ||
− | |||
− | |||
=== <code>shadowColor</code> === | === <code>shadowColor</code> === | ||
تُستخدم هذه الخاصيّة لتحديد لون [[ReactNative/colors|color]] الظّل الهابط (drop shadow). | تُستخدم هذه الخاصيّة لتحديد لون [[ReactNative/colors|color]] الظّل الهابط (drop shadow). | ||
+ | |||
+ | هذه الخاصية ستعمل على الإصدار 28 من واجهة منصة Android، ويمكن استخدام الخاصّية [[ReactNative/view style props#elevation|elevation]] لإصدارات سابقة. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
− | |||
|- | |- | ||
− | |لون | + | |لون ([[ReactNative/colors|color]]) |
− | ([[ReactNative/colors|color]]) | ||
|لا | |لا | ||
− | |||
|} | |} | ||
سطر 119: | سطر 117: | ||
!المنصة | !المنصة | ||
|- | |- | ||
− | |كائن | + | |كائن <code>{width:number,height:number}</code> |
|لا | |لا | ||
|iOS | |iOS | ||
سطر 152: | سطر 150: | ||
* [https://facebook.github.io/react-native/docs/shadow-props صفحة Shadow Props في توثيق React Native الرسميّ] | * [https://facebook.github.io/react-native/docs/shadow-props صفحة Shadow Props في توثيق React Native الرسميّ] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native Component]] |
المراجعة الحالية بتاريخ 14:05، 9 أكتوبر 2021
خاصيات الظل (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 |