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