المكون ImageBackground في React Native

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

مصادر

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