View Style Props

مثال

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 الرسميّ