ربما يوجد خطأ في التنسيقات مثل position و تموضع العنصرين فوق بعضهم
حاول تمرير الأبعاد الطول و العرض معاً يمكنك إضافة العرض
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,
}
})