ReactNative/imagebackground

المكوّن ImageBackground

الميزة 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

هي الخاصيات التي ترث المكوّن Image.

imageStyle

النوع
Image Style

imageRef

تسمح هذه الخاصية بضبط مرجع لمكوّن Image الداخلي.

النوع
Ref

style

النوع
View Style

مصادر

• صفحة ImageBackground في توثيق React Native الرسمي.