عرض مصدر ReactNative/view style props

<noinclude>{{DISPLAYTITLE:خاصيات تنسيق الواجهة في React Native}}</noinclude> 
فيما يلي مثال عن خاصّيات تنسيق الواجهة (View Style Props) في [[ReactNative|React Native]].
__toc__

== مثال ==
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/viewstyleprops تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>

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

=== <code>borderRightColor</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|([[ReactNative/colors|لون]])
|لا
|}

=== <code>backfaceVisibility</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|‎‏‪('visible','hidden')
|لا
|}

=== <code>borderBottomColor</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|([[ReactNative/colors|لون]])
|لا
|}

=== <code>borderBottomEndRadius</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderBottomLeftRadius</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderBottomRightRadius</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderBottomStartRadius</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderBottomWidth</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderColor</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|([[ReactNative/colors|لون]])
|لا
|}

=== <code>borderEndColor</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|([[ReactNative/colors|لون]])
|لا
|}

=== <code>borderLeftColor</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|([[ReactNative/colors|لون]])
|لا
|}

=== <code>borderLeftWidth</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderRadious</code> ===
إذا لم تكن الحافة المدورة (rounded border) ظاهرةً فجرِّب تطبيق <code>'overflow: 'hidden</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>backgroundColor</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|([[ReactNative/colors|لون]])
|لا
|}

=== <code>borderRightWidth</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderStartColor</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|([[ReactNative/colors|لون]])
|لا
|}

=== <code>borderStyle</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|‪('solid','dotted','dashed')
|لا
|}

=== <code>borderTopColor</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|([[ReactNative/colors|لون]])
|لا
|}

=== <code>borderTopEndRadius</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderTopLeftRadius</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderTopRightRadius</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderTopStartRadius</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>borderTopWidth</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>opacity</code> ===
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

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

== مصادر ==

* [https://facebook.github.io/react-native/docs/view-style-props صفحة View Style Props في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Component]]