الفرق بين المراجعتين ل"ReactNative/imagebackground"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'== المكوّن ImageBackground == الميزة <code>background-image</code> هي إحدى الميزات الشائعة المطلوبة من المطورين الذ...') |
جميل-بيلوني (نقاش | مساهمات) |
||
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
سطر 1: | سطر 1: | ||
− | + | <noinclude>{{DISPLAYTITLE:المكون ImageBackground في React Native}}</noinclude> | |
− | الميزة <code>background-image</code> هي إحدى الميزات الشائعة المطلوبة من المطورين الذين هم على دراية بالويب. | + | الميزة <code>[[CSS/background-image|background-image]]</code> هي إحدى الميزات الشائعة المطلوبة من المطورين الذين هم على دراية بالويب. يمكنك التعامل مع حالة الاستخدام هذه من خلال استخدام المكوِّن <code><ImageBackground></code>، الذي يحتوي على الخاصيات props نفسها كالخاصية <code><Image></code>، ويمكنك إضافة أي أبناء ترغب في وضعها فوق هذا المكوّن. |
قد لا ترغب في استخدام المكوّن <code><ImageBackground></code> في بعض الحالات، نظرًا لأن التطبيق أساسي. راجع [https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js الشيفرة المصدرية] للمكوّن <code><ImageBackground></code> لمزيد من المعلومات، وأنشئ مكونك المخصَّص عند الحاجة. | قد لا ترغب في استخدام المكوّن <code><ImageBackground></code> في بعض الحالات، نظرًا لأن التطبيق أساسي. راجع [https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js الشيفرة المصدرية] للمكوّن <code><ImageBackground></code> لمزيد من المعلومات، وأنشئ مكونك المخصَّص عند الحاجة. | ||
سطر 6: | سطر 6: | ||
لاحظ أنه يجب عليك تحديد بعض سمات نمط العرض والارتفاع. | لاحظ أنه يجب عليك تحديد بعض سمات نمط العرض والارتفاع. | ||
− | + | == مثال == | |
− | <syntaxhighlight lang="javascript"> | + | إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/imagebackground تجربة حية]):<syntaxhighlight lang="javascript"> |
import React from "react"; | import React from "react"; | ||
import { ImageBackground, StyleSheet, Text, View } from "react-native"; | import { ImageBackground, StyleSheet, Text, View } from "react-native"; | ||
سطر 43: | سطر 43: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | + | == الخاصيات Props == | |
+ | ترث من خاصيات المكوّن [[ReactNative/image#.D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.8A.D8.A7.D8.AA|<code>Image</code>]]. | ||
− | + | ===<code>imageStyle</code>=== | |
− | |||
− | |||
− | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 55: | سطر 53: | ||
|} | |} | ||
− | + | ===<code>imageRef</code>=== | |
تسمح هذه الخاصية بضبط مرجع لمكوّن <code>Image</code> الداخلي. | تسمح هذه الخاصية بضبط مرجع لمكوّن <code>Image</code> الداخلي. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 63: | سطر 61: | ||
|} | |} | ||
− | + | ===<code>style</code>=== | |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 73: | سطر 71: | ||
* [https://reactnative.dev/docs/imagebackground صفحة ImageBackground في توثيق React Native الرسمي.] | * [https://reactnative.dev/docs/imagebackground صفحة ImageBackground في توثيق React Native الرسمي.] | ||
+ | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native Component]] |
المراجعة الحالية بتاريخ 14:01، 9 أكتوبر 2021
الميزة background-image
هي إحدى الميزات الشائعة المطلوبة من المطورين الذين هم على دراية بالويب. يمكنك التعامل مع حالة الاستخدام هذه من خلال استخدام المكوِّن <ImageBackground>
، الذي يحتوي على الخاصيات props نفسها كالخاصية <Image>
، ويمكنك إضافة أي أبناء ترغب في وضعها فوق هذا المكوّن.
قد لا ترغب في استخدام المكوّن <ImageBackground>
في بعض الحالات، نظرًا لأن التطبيق أساسي. راجع الشيفرة المصدرية للمكوّن <ImageBackground>
لمزيد من المعلومات، وأنشئ مكونك المخصَّص عند الحاجة.
لاحظ أنه يجب عليك تحديد بعض سمات نمط العرض والارتفاع.
مثال
إليك المثال التالي (تجربة حية):
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column"
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
},
text: {
color: "white",
fontSize: 42,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000a0"
}
});
export default App;
الخاصيات Props
ترث من خاصيات المكوّن Image
.
imageStyle
النوع |
---|
Image Style |
imageRef
تسمح هذه الخاصية بضبط مرجع لمكوّن Image
الداخلي.
النوع |
---|
Ref |
style
النوع |
---|
View Style |