كيف اقوم بعرض خلفيه للشاشه في 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 19: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%'
  }
})
	 
	

أظهر المزيد  

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

  بتاريخ On 29‏/10‏/2022 at 14:34 قال ahmedkawbal:

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

 

أظهر المزيد  

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

  بتاريخ On 29‏/10‏/2022 at 14:46 قال علي محسن:

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

أظهر المزيد  

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

  بتاريخ On 29‏/10‏/2022 at 15:50 قال ahmedkawbal:

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

أظهر المزيد  

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