الفرق بين المراجعتين لصفحة: «ReactNative/view style props»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
ط مراجعة
طلا ملخص تعديل
 
(9 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:View Style Props في React Native}}</noinclude>
<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 (
    return (
     <View style={styles.container}>
      <View style={styles.container}>
       <View style={styles.top} />
        <View style={styles.top} />
       <View style={styles.middle} />
        <View style={styles.middle} />
       <View style={styles.bottom} />
        <View style={styles.bottom} />
     </View>
      </View>
   );
    );
}
}
​
 
const styles = StyleSheet.create({
const styles = StyleSheet.create({
 container: {
  container: {
   flex: 1,
    flex: 1,
   justifyContent: "space-between",
    justifyContent: "space-between",
   backgroundColor: "#fff",
    backgroundColor: "#fff",
   padding: 20,
    padding: 20,
   margin: 10,
    margin: 10,
   },
   },
 top: {
  top: {
   flex: 0.3,
    flex: 0.3,
   backgroundColor: "grey",
    backgroundColor: "grey",
   borderWidth: 5,
    borderWidth: 5,
   borderTopLeftRadius: 20,
    borderTopLeftRadius: 20,
   borderTopRightRadius: 20,
    borderTopRightRadius: 20,
   },
   },
 middle: {
  middle: {
   flex: 0.3,
    flex: 0.3,
   backgroundColor: "beige",
    backgroundColor: "beige",
   borderWidth: 5,
    borderWidth: 5,
   },
   },
 bottom: {
  bottom: {
   flex: 0.3,
    flex: 0.3,
   backgroundColor: "pink",
    backgroundColor: "pink",
   borderWidth: 5,
    borderWidth: 5,
   borderBottomLeftRadius: 20,
    borderBottomLeftRadius: 20,
   borderBottomRightRadius: 20,
    borderBottomRightRadius: 20,
   },
   },
});
});
​
 
export default ViewStyleProps;
export default ViewStyleProps;
</syntaxhighlight>
</syntaxhighlight>


== الخاصيّات (Props) ==
== الخاصيات (Props) ==


=== <code>borderRightColor</code> ===
=== <code>borderRightColor</code> ===
سطر 55: سطر 57:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 64: سطر 66:
!مطلوب
!مطلوب
|-
|-
|قيمة اسمية
|‎‏‪('visible','hidden')
‎‏‪enum('visible','hidden')
|لا
|لا
|}
|}
سطر 74: سطر 75:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 83: سطر 84:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 93: سطر 93:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 103: سطر 102:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 113: سطر 111:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 123: سطر 120:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 133: سطر 129:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 142: سطر 138:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 151: سطر 147:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 160: سطر 156:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}


=== <code>borderRadious</code> ===
=== <code>borderRadious</code> ===
إذا لم تكن الحافة المدورة ظاهرةً فجرِّب تطبيق <code>'overflow: 'hidden</code>.
إذا لم تكن الحافة المدورة (rounded border) ظاهرةً فجرِّب تطبيق <code>'overflow: 'hidden</code>.
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 181: سطر 175:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 190: سطر 184:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 200: سطر 193:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 209: سطر 202:
!مطلوب
!مطلوب
|-
|-
|قيمة اسمية
|‪('solid','dotted','dashed')
‪enum('solid','dotted','dashed')
|لا
|لا
|}
|}
سطر 219: سطر 211:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 228: سطر 220:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 238: سطر 229:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 248: سطر 238:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 258: سطر 247:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 268: سطر 256:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 278: سطر 265:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}


=== <code>elevation</code> ===
=== <code>elevation</code> ===
مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع العَرض عن طريق الواجهة البرمجية  [[material/shadows-clipping#Elevation|elevation API]]. وتقوم هذه بإضافة ظل ساقط للعنصر، وتؤثّر على z-order العرض المتداخل. وتعمل هذه الخاصيّة فقط على منصة ‬‎‏‪‫‫Android 5.0+، وليس لها تأثيرٌ في الإصدارات السابقة.
مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع الواجهة عن طريق الواجهة البرمجية  [https://developer.android.com/training/material/shadows-clipping.html#Elevation elevation API]. وتقوم هذه بإضافة ظل ساقط للعنصر، وتؤثّر على ترتيب المحور z أي z-order للواجهات المتراكبة. وتعمل هذه الخاصيّة فقط على الإصدار 5.0 وما بعده من منصة ‬‎‏‪‫‫Android، وليس لها تأثيرٌ في الإصدارات السابقة.
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 290: سطر 276:
!المنصة
!المنصة
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|Android
|Android
سطر 300: سطر 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

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/view_style_props&oldid=31545»