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

مصادر

• صفحة View Style Props في توثيق React Native الرسميّ