خاصيات تنسيق الواجهة في React Native

من موسوعة حسوب
< ReactNative
مراجعة 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

مصادر