فيما يلي مثال عن خاصّيات تنسيق الواجهة (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
|
مصادر