الفرق بين المراجعتين ل"ReactNative/view style props"
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
(6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 1: | سطر 1: | ||
− | <noinclude>{{DISPLAYTITLE:خاصيات | + | <noinclude>{{DISPLAYTITLE:خاصيات تنسيق الواجهة في React Native}}</noinclude> |
− | فيما يلي مثال عن | + | فيما يلي مثال عن خاصّيات تنسيق الواجهة (View Style Props) في [[ReactNative|React Native]]. |
__toc__ | __toc__ | ||
== مثال == | == مثال == | ||
− | <syntaxhighlight lang="javascript"> | + | إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/viewstyleprops تجربة حية]):<syntaxhighlight lang="javascript"> |
import React from "react"; | import React from "react"; | ||
import { View, StyleSheet } from "react-native"; | import { View, StyleSheet } from "react-native"; | ||
− | + | ||
const ViewStyleProps = () => { | const ViewStyleProps = () => { | ||
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <View style={styles.top} /> | |
− | + | <View style={styles.middle} /> | |
− | + | <View style={styles.bottom} /> | |
− | + | </View> | |
− | + | ); | |
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | flex: 1, | |
− | + | justifyContent: "space-between", | |
− | + | backgroundColor: "#fff", | |
− | + | padding: 20, | |
− | + | margin: 10, | |
}, | }, | ||
− | + | top: { | |
− | + | flex: 0.3, | |
− | + | backgroundColor: "grey", | |
− | + | borderWidth: 5, | |
− | + | borderTopLeftRadius: 20, | |
− | + | borderTopRightRadius: 20, | |
}, | }, | ||
− | + | middle: { | |
− | + | flex: 0.3, | |
− | + | backgroundColor: "beige", | |
− | + | borderWidth: 5, | |
}, | }, | ||
− | + | bottom: { | |
− | + | flex: 0.3, | |
− | + | backgroundColor: "pink", | |
− | + | borderWidth: 5, | |
− | + | borderBottomLeftRadius: 20, | |
− | + | borderBottomRightRadius: 20, | |
}, | }, | ||
}); | }); | ||
− | + | ||
export default ViewStyleProps; | export default ViewStyleProps; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 66: | سطر 66: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('visible','hidden') |
|لا | |لا | ||
|} | |} | ||
سطر 202: | سطر 202: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('solid','dotted','dashed') |
|لا | |لا | ||
|} | |} | ||
سطر 270: | سطر 270: | ||
=== <code>elevation</code> === | === <code>elevation</code> === | ||
− | مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع | + | مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع الواجهة عن طريق الواجهة البرمجية [https://developer.android.com/training/material/shadows-clipping.html#Elevation elevation API]. وتقوم هذه بإضافة ظل ساقط للعنصر، وتؤثّر على ترتيب المحور z أي z-order للواجهات المتراكبة. وتعمل هذه الخاصيّة فقط على الإصدار 5.0 وما بعده من منصة Android، وليس لها تأثيرٌ في الإصدارات السابقة. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 285: | سطر 285: | ||
* [https://facebook.github.io/react-native/docs/view-style-props صفحة View Style Props في توثيق React Native الرسميّ] | * [https://facebook.github.io/react-native/docs/view-style-props صفحة View Style Props في توثيق React Native الرسميّ] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native Component]] |
المراجعة الحالية بتاريخ 14:05، 9 أكتوبر 2021
فيما يلي مثال عن خاصّيات تنسيق الواجهة (View Style Props) في React Native.
مثال
إليك المثال التالي (تجربة حية):
import React from "react";
import { View, StyleSheet } from "react-native";
const ViewStyleProps = () => {
return (
<View style={styles.container}>
<View style={styles.top} />
<View style={styles.middle} />
<View style={styles.bottom} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
backgroundColor: "#fff",
padding: 20,
margin: 10,
},
top: {
flex: 0.3,
backgroundColor: "grey",
borderWidth: 5,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
middle: {
flex: 0.3,
backgroundColor: "beige",
borderWidth: 5,
},
bottom: {
flex: 0.3,
backgroundColor: "pink",
borderWidth: 5,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
},
});
export default ViewStyleProps;
الخاصيات (Props)
borderRightColor
النوع | مطلوب |
---|---|
(لون) | لا |
backfaceVisibility
النوع | مطلوب |
---|---|
('visible','hidden') | لا |
borderBottomColor
النوع | مطلوب |
---|---|
(لون) | لا |
borderBottomEndRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderBottomLeftRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderBottomRightRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderBottomStartRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderBottomWidth
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderColor
النوع | مطلوب |
---|---|
(لون) | لا |
borderEndColor
النوع | مطلوب |
---|---|
(لون) | لا |
borderLeftColor
النوع | مطلوب |
---|---|
(لون) | لا |
borderLeftWidth
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderRadious
إذا لم تكن الحافة المدورة (rounded border) ظاهرةً فجرِّب تطبيق 'overflow: 'hidden
.
النوع | مطلوب |
---|---|
عدد (number) | لا |
backgroundColor
النوع | مطلوب |
---|---|
(لون) | لا |
borderRightWidth
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderStartColor
النوع | مطلوب |
---|---|
(لون) | لا |
borderStyle
النوع | مطلوب |
---|---|
('solid','dotted','dashed') | لا |
borderTopColor
النوع | مطلوب |
---|---|
(لون) | لا |
borderTopEndRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderTopLeftRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderTopRightRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderTopStartRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderTopWidth
النوع | مطلوب |
---|---|
عدد (number) | لا |
opacity
النوع | مطلوب |
---|---|
عدد (number) | لا |
elevation
مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع الواجهة عن طريق الواجهة البرمجية elevation API. وتقوم هذه بإضافة ظل ساقط للعنصر، وتؤثّر على ترتيب المحور z أي z-order للواجهات المتراكبة. وتعمل هذه الخاصيّة فقط على الإصدار 5.0 وما بعده من منصة Android، وليس لها تأثيرٌ في الإصدارات السابقة.
النوع | مطلوب | المنصة |
---|---|---|
عدد (number) | لا | Android |