كيف اقوم بعرض خلفيه للشاشه في ReactNative

يمكنك إستعمال ImageBackground لتحميل خلفية للشاشة المعروضة ومن إسناد رابط الصورة في مشروعك (مثلاً مجلد assets)  وبإستعمال require  في الprop المسماة source وكما في المثال التالي

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

export default function App() {

  let imageUrl= '../assets/background_image.png' // رابط الصورة في المشروع
  return (
    <ImageBackground
      source={require(imageUrl)}
      resizeMode="repeat"
      style={styles.background}
    >
      <View>
          <Text>
              repeat أي محتوى تريد هنا. لاحظ أن الصورة في وضع
              react native أي سيتم تكرارها لملء الشاشة ويمكنك التعرف على باقي خواص هذا المكون في الموقع الرسمي ل
          </Text>
      </View>
    </ImageBackground>
  )
}

const styles = StyleSheet.create({ // تعريف تنسيق الخلفية
  background: {
    flex: 1,
    width: '100%'
  }
})
	 
	

بتاريخ On 27‏/10‏/2022 at 22:23 قال علي محسن:

يمكنك إستعمال ImageBackground لتحميل خلفية للشاشة المعروضة ومن إسناد رابط الصورة في مشروعك (مثلاً مجلد assets)  وبإستعمال require  في الprop المسماة source وكما في المثال التالي

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

export default function App() {

  let imageUrl= '../assets/background_image.png' // رابط الصورة في المشروع
  return (
    <ImageBackground
      source={require(imageUrl)}
      resizeMode="repeat"
      style={styles.background}
    >
      <View>
          <Text>
              repeat أي محتوى تريد هنا. لاحظ أن الصورة في وضع
              react native أي سيتم تكرارها لملء الشاشة ويمكنك التعرف على باقي خواص هذا المكون في الموقع الرسمي ل
          </Text>
      </View>
    </ImageBackground>
  )
}

const styles = StyleSheet.create({ // تعريف تنسيق الخلفية
  background: {
    flex: 1,
    width: '100%'
  }
})
	 
	

لم يعمل لدي وظهر هاذا الخطا  

بتاريخ 11 دقائق مضت قال ahmedkawbal:

لم يعمل لدي وظهر هاذا الخطا  

 

السبب في الخطأ هو أنك تحاول الوصول الى ملف غير موجود أو أنك تكتب مساره بطريقة خاطئة. قم بإظهار تركيب ملفات المشروع ثم قم بأخذ صورة للشاشة حتى نساعدك في كتابة مسار الملف بشكله الصحيح إو قم بمشاركة ملف المشروع مضغوطاً للإطلاع عليه.

بتاريخ منذ ساعة مضت قال علي محسن:

السبب في الخطأ هو أنك تحاول الوصول الى ملف غير موجود أو أنك تكتب مساره بطريقة خاطئة. قم بإظهار تركيب ملفات المشروع ثم قم بأخذ صورة للشاشة حتى نساعدك في كتابة مسار الملف بشكله الصحيح إو قم بمشاركة ملف المشروع مضغوطاً للإطلاع عليه.

لقد تم ذالك ولاكن لدي View ولديه لون كخلفيه واريده ان يكون شفاف لكي تظهر خلفيه الشاشه الرئسيه كيف ذالك 

بتاريخ 1 دقيقة مضت قال ahmedkawbal:

لقد تم ذالك ولاكن لدي View ولديه لون كخلفيه واريده ان يكون شفاف لكي تظهر خلفيه الشاشه الرئسيه كيف ذالك 

بإستخدام css تستطيع تحقيق ذلك. مثلاً يكون position بالقيمة absolute وتكون opacity بالقيمة 0.5