View Style Props في React Native

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

فيما يلي مثال عن 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

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

‎‏‪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

مصادر