خاصيات تنسيق الواجهة في 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

النوع	مطلوب
‎‏‪('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

مصادر

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