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

من موسوعة حسوب
التعديل اللاحق ←
مرئينص الويكي
أنشأ الصفحة ب'= View Style Props = == مثال == <syntaxhighlight lang="javascript"> import React from "react"; import { View, StyleSheet } from "react-native"; ​ const ViewStyleP...'
 
ط مراجعة
سطر 1: سطر 1:
= View Style Props =
<noinclude>{{DISPLAYTITLE:View Style Props في React Native}}</noinclude>
 
__toc__
== مثال ==
== مثال ==
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
سطر 55: سطر 55:
!مطلوب
!مطلوب
|-
|-
|[https://reactnative.dev/docs/colors لون]
|([https://reactnative.dev/docs/colors لون])
|لا
|لا
|}
|}
سطر 65: سطر 65:
|-
|-
|قيمة اسمية
|قيمة اسمية
enum('visible','hidden')
‎‏‪enum('visible','hidden')
|لا
|لا
|}
|}
سطر 74: سطر 74:
!مطلوب
!مطلوب
|-
|-
|[https://reactnative.dev/docs/colors لون]
|([https://reactnative.dev/docs/colors لون])
|لا
|لا
|}
|}
سطر 84: سطر 84:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 94: سطر 94:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 104: سطر 104:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 114: سطر 114:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 124: سطر 124:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 133: سطر 133:
!مطلوب
!مطلوب
|-
|-
|[https://reactnative.dev/docs/colors لون]
|([https://reactnative.dev/docs/colors لون])
|لا
|لا
|}
|}
سطر 142: سطر 142:
!مطلوب
!مطلوب
|-
|-
|[https://reactnative.dev/docs/colors لون]
|([https://reactnative.dev/docs/colors لون])
|لا
|لا
|}
|}
سطر 151: سطر 151:
!مطلوب
!مطلوب
|-
|-
|[https://reactnative.dev/docs/colors لون]
|([https://reactnative.dev/docs/colors لون])
|لا
|لا
|}
|}
سطر 161: سطر 161:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 172: سطر 172:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 181: سطر 181:
!مطلوب
!مطلوب
|-
|-
|[https://reactnative.dev/docs/colors لون]
|([https://reactnative.dev/docs/colors لون])
|لا
|لا
|}
|}
سطر 191: سطر 191:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 200: سطر 200:
!مطلوب
!مطلوب
|-
|-
|[https://reactnative.dev/docs/colors لون]
|([https://reactnative.dev/docs/colors لون])
|لا
|لا
|}
|}
سطر 210: سطر 210:
|-
|-
|قيمة اسمية
|قيمة اسمية
enum('solid','dotted','dashed')
‪enum('solid','dotted','dashed')
|لا
|لا
|}
|}
سطر 219: سطر 219:
!مطلوب
!مطلوب
|-
|-
|[https://reactnative.dev/docs/colors لون]
|([https://reactnative.dev/docs/colors لون])
|لا
|لا
|}
|}
سطر 229: سطر 229:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 239: سطر 239:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 249: سطر 249:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 259: سطر 259:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 269: سطر 269:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}
سطر 279: سطر 279:
|-
|-
|رقم
|رقم
number
(number)
|لا
|لا
|}
|}


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


* [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]]

مراجعة 08:10، 7 يناير 2021

مثال

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

النوع مطلوب
قيمة اسمية

‎‏‪enum('visible','hidden')

لا

borderBottomColor

النوع مطلوب
(لون) لا

borderBottomEndRadius

النوع مطلوب
رقم

(number)

لا

borderBottomLeftRadius

النوع مطلوب
رقم

(number)

لا

borderBottomRightRadius

النوع مطلوب
رقم

(number)

لا

borderBottomStartRadius

النوع مطلوب
رقم

(number)

لا

borderBottomWidth

النوع مطلوب
رقم

(number)

لا

borderColor

النوع مطلوب
(لون) لا

borderEndColor

النوع مطلوب
(لون) لا

borderLeftColor

النوع مطلوب
(لون) لا

borderLeftWidth

النوع مطلوب
رقم

(number)

لا

borderRadious

إذا لم تكن الحافة المدورة ظاهرةً فجرِّب تطبيق 'overflow: 'hidden.

النوع مطلوب
رقم

(number)

لا

backgroundColor

النوع مطلوب
(لون) لا

borderRightWidth

النوع مطلوب
رقم

(number)

لا

borderStartColor

النوع مطلوب
(لون) لا

borderStyle

النوع مطلوب
قيمة اسمية

‪enum('solid','dotted','dashed')

لا

borderTopColor

النوع مطلوب
(لون) لا

borderTopEndRadius

النوع مطلوب
رقم

(number)

لا

borderTopLeftRadius

النوع مطلوب
رقم

(number)

لا

borderTopRightRadius

النوع مطلوب
رقم

(number)

لا

borderTopStartRadius

النوع مطلوب
رقم

(number)

لا

borderTopWidth

النوع مطلوب
رقم

(number)

لا

opacity

النوع مطلوب
رقم

(number)

لا

elevation

مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع العَرض عن طريق الواجهة البرمجية elevation API. وتقوم هذه بإضافة ظل ساقط للعنصر، وتؤثّر على z-order العرض المتداخل. وتعمل هذه الخاصيّة فقط على منصة ‬‎‏‪‫‫Android 5.0+، وليس لها تأثيرٌ في الإصدارات السابقة.

النوع مطلوب المنصة
رقم

(number)

لا Android

مصادر

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