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 |