كيف أضع صورة خلفية ImageBackground لعنصر ScrollView في react native

أرجو وضع العناصر بشكل متداخل بالعكس، أي نضع ScrollView ضمن ImageBackground ليظهر فوقها

<ImageBackground>
    <ScrollView>
    ......
    </ScrollView>
</ImageBackground>

ثم أضف التنسيقات التي تناسب تطبيقك

بتاريخ 52 دقائق مضت قال Wael Aljamal:

أرجو وضع العناصر بشكل متداخل بالعكس، أي نضع ScrollView ضمن ImageBackground ليظهر فوقها

<ImageBackground>
    <ScrollView>
    ......
    </ScrollView>
</ImageBackground>

ثم أضف التنسيقات التي تناسب تطبيقك

لكن وجدت في اليوتيوب من وضف الخلفية في وسط scroll...

بنفس الطريقة وظهرت له لماذا ؟

 إضافة عندما أريد أن أتحكم في أرتفاع الصورة بهذه الطريقة تختفي لماذا؟

const HIGHT= Dimensions.get('window').height;
return (
     <ImageBackground source={localImage}  style={{height:HIGHT*2.5}}>
    
    </ImageBackground>
    
)

بتاريخ 5 دقائق مضت قال Mohamed Lamin Mahmoudi:

بنفس الطريقة وظهرت له لماذا ؟

ربما يوجد خطأ في التنسيقات مثل position و تموضع العنصرين فوق بعضهم

بتاريخ 6 دقائق مضت قال Mohamed Lamin Mahmoudi:

 إضافة عندما أريد أن أتحكم في أرتفاع الصورة بهذه الطريقة تختفي لماذا؟

حاول تمرير الأبعاد الطول و العرض معاً يمكنك إضافة العرض 

width:Dimensions.get("screen").width

مع تمرير الخاصية 

resizeMethod="resize"

أحياناً يفشل المتصفح في تكبير عرض الصورة (مثل * 2.5 مرة) فلا ينجح في ذلك مما يلغي عملية عرض الصورة.

مثال يعمل:

import {
  View,
  Text,
  ImageBackground,
  Dimensions,
  StyleSheet,
} from 'react-native';

const WIDTH = Dimensions.get('screen').width;
const HEIGHT = Dimensions.get('screen').height;

const MainPage = () => {
   return (
     <View style={styles.subDomainItem}>
        <ImageBackground
            resizeMode="contain"
            source={ImageConfig.script_default_cloud}
            style={styles.bgImageStyle}
        >
            <Text>Sample</Text>
      </ImageBackground>
   </View>
);
};

const styles = StyleSheet.create({
  subDomainItem: {
      width: WIDTH,
      height: HEIGHT,
      alignItems: 'center',
  },
  bgImageStyle: {
    justifyContent: 'center',
    resizeMode: 'contain',
    width: WIDTH,
    height: HEIGHT,
  }
})