रिएक्ट नेटिव में फुल स्क्रीन बैकग्राउंड इमेज जोड़ने का सबसे अच्छा तरीका क्या है

Question

मैं व्यू में एक पूर्ण-स्क्रीन छवि जोड़ना चाहता था इसलिए मैं यह कोड लिखता हूं

return (
    <View style={styles.container}>
        <Image source={require('image!egg')}  style={styles.backgroundImage}/>
    </View>
)

और शैली को परिभाषित किया

var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

लेकिन इस तरह से मैं वास्तविक iPhone स्क्रीन का आकार कैसे खोजूं?

मैं पिक्सेल घनत्व का उपयोग करने के लिए एक एपीआई देखा है, लेकिन स्क्रीन आकार के बारे में कुछ भी नहीं ...

कोई उपाय?

Comments

प्रदर्शन के बारे में कैसे? क्या इसका उपयोग करना ठीक है .pngया .jpg? क्या ऐप डायरेक्टरी ट्री के अंदर वॉलपेपर इमेज स्टोर करना ठीक है? या कुछ और उपयोग करना बेहतर है? .svgया कुछ भी?

— ग्रीन

Answer 1

आप पूरी स्क्रीन को भरने के लिए flex: 1किसी <Image>तत्व पर स्टाइल का उपयोग कर सकते हैं । आप छवि को पूरी तरह से भरने के लिए छवि आकार मोड में से एक का उपयोग कर सकते हैं:

<Image source={require('image!egg')} style={styles.backgroundImage} />

अंदाज:

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

मुझे पूरा यकीन है कि आप <View>अपनी छवि को लपेटने से छुटकारा पा सकते हैं और यह काम करेगा।

Comments

हाँ, यह काम करता है, मैंने छवि तत्व को सबसे ऊपर ले जाया है और backgroundImage:{ justifyContent: 'center', alignItems: 'center', flex: 1, resizeMode: Image.resizeMode.contain, },धन्यवाद के रूप में इसकी शैली सेट की है

— talpaz

थोड़ी देर के लिए इससे जूझने के बाद, मैंने स्क्रीन पर अन्य सामग्री के पीछे की पृष्ठभूमि की छवि को प्रदर्शित करने की अनुमति देने के लिए Imageघटक को पूरी तरह से तैनात Viewकरने के लिए इसे लपेटना सबसे आसान पाया ।

— जोश हबदास

महत्वपूर्ण संपादित करें: <Image src=...>अब है<Image source=...>

— उपयोगकर्ता नाम

अब जब z- इंडेक्स समर्थित है, तो क्या आप इस उत्तर को बदलेंगे?

— मैकेंवा

यह ठीक है लेकिन छवि खिंच रही है और स्क्रीन में स्क्रॉल सक्षम है

— अनंत प्रसाद

Answer 2

(यह अब हटा दिया गया है आप ImageBackground का उपयोग कर सकते हैं )

यह मैंने कैसे किया है। मुख्य सौदा स्थिर स्थिर आकारों से छुटकारा पा रहा था।

class ReactStrap extends React.Component {
  render() {
    return (
      <Image source={require('image!background')} style={styles.container}>
        ... Your Content ...
      </Image>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    // remove width and height to override fixed static size
    width: null,
    height: null,
  }
};

Comments

हाँ, यह कैसे डॉक्स द्वारा किया जाना चाहिए है कि facebook.github.io/react-native/docs/...

— डैनियल Steigerwald

यह सबसे अच्छा जवाब है!

— वैनसन विंग लेउंग

धन्यवाद! सुनिश्चित करें कि Imageआपका पहला घटक वापस आ गया है, कंटेनर। सबसे पहले, मैंने आकस्मिक रूप से कंटेनर के Imageभीतर नेस्टेड किया Viewथा।

— Glavin001

YellowBox.js: 76 बच्चों के साथ <Image> का उपयोग करना पदावनत है और निकट भविष्य में एक त्रुटि होगी। कृपया लेआउट पर पुनर्विचार करें या इसके बजाय <ImageBackground> का उपयोग करें। जब मैं <Image> में सामग्री जोड़ता हूं, तो यह चेतावनी दिखाई देती है। इससे वाकई बहुत गुस्सा आता है।

— बेंजामिन वेन

यह वास्तव में पदावनत है। ImageBackground या (सर्वोत्तम) स्थिति का उपयोग करें: निरपेक्ष

— माइक 14

Answer 3

नोट: यह समाधान पुराना है। कृपया इसके बजाय https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting देखें

इस समाधान की कोशिश करो। यह आधिकारिक रूप से समर्थित है। मैंने अभी-अभी इसका परीक्षण किया है और यह त्रुटिपूर्ण है।

var styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
  }
});

और इसे पृष्ठभूमि छवि के रूप में उपयोग करने के लिए, बस निम्नलिखित करें।

<Image style={styles.backgroundImage}>
  <View>
    <Text>All your stuff</Text>
  </View>
</Image>

Comments

क्या, यह आधिकारिक तौर पर समर्थित है?

— 18

हाँ। यह है। facebook.github.io/react-native/docs/…

— विनोद सोबले

alignSelfऔर widthयहाँ का उपयोग क्या है?

— हरकीरत सलूजा

आप स्ट्रेचिंग कर रहे हैं <इमेज /> उपलब्ध चौड़ाई और चौड़ाई के लिए काम करने के लिए 'स्ट्रेच' के लिए अशक्त होना आवश्यक है

— विनोद सोबेल

FYI करें, छवि घटकों के रिएक्ट (0.51.0) के नवीनतम संस्करण में बच्चे नहीं हो सकते। यह अब काम नहीं करता है।

— rplankenhorn

Answer 4

मैंने प्रतिक्रिया-मूल संस्करण = 0.19.0 का उपयोग करके Android के लिए कोई लाभ नहीं लेने के लिए इनमें से कई उत्तरों की कोशिश की।

किसी कारण के लिए, मेरी स्टाइलशीट के अंदर के आकार का आकार उचित रूप से काम नहीं करता था? हालांकि, जब sytlesheet था

backgroundImage: {
flex: 1,
width: null,
height: null,
}

और, छवि टैग के भीतर मैंने resizeMode निर्दिष्ट किया है:

<Image source={require('path/to/image.png')} style= {styles.backgroundImage} resizeMode={Image.resizeMode.sretch}>

यह पूरी तरह से काम किया! जैसा कि ऊपर बताया गया है, आप Image.resizeMode.cover का उपयोग कर सकते हैं या इसमें शामिल कर सकते हैं।

उम्मीद है की यह मदद करेगा!

Answer 5

मार्च 2018 को अपडेट करें छवि का उपयोग करते हुए पदावनत उपयोग ImageBackground है

  <ImageBackground 
          source={{uri: 'https://images.pexels.com/photos/89432/pexels-photo-89432.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb'}}
          style={{ flex: 1,
            width: null,
            height: null,
            }}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >

Comments

प्रलेखन: facebook.github.io/react-native/docs/…

— जोय

यह सही है, अब आपको ImageBackground का उपयोग करना होगा, एक कंटेनर के रूप में छवि को हटा दिया गया है। एक कंटेनर के रूप में देखें यहां आवश्यक नहीं है कि आप मुख्य कंटेनर के रूप में सिर्फ ImageBackground का उपयोग कर सकते हैं।

— डिएगो अनानुए

Answer 6

ब्रैडेन रॉकवेल नेपियर के उत्तर के आधार पर , मैंने यह BackgroundImageघटक बनाया

BackgroundImage.js

import React, { Component } from 'react'
import { Image } from 'react-native'

class BackgroundImage extends Component {
  render() {
    const {source, children, style, ...props} = this.props
    return (
      <Image source={ source }
             style={ { flex: 1, width: null, height: null, ...style } }
             {...props}>
        { children }
      </Image>
    )
  }
}
BackgroundImage.propTypes = {
  source: React.PropTypes.object,
  children: React.PropTypes.object,
  style: React.PropTypes.object
}
export default BackgroundImage

someWhereInMyApp.js

 import BackgroundImage from './backgroundImage'
 ....
 <BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
    <Text>Test</Text>
 </BackgroundImage>

Answer 7

यदि आप इसे पृष्ठभूमि छवि के रूप में उपयोग करना चाहते हैं, तो आपको जून 2017 के अंत में v0.46 में पेश किए गए नए <ImageBackground>घटक का उपयोग करना होगा । यह घोंसले के शिकार का समर्थन करता है, जबकि जल्द ही नहीं होगा।<Image>

ये रहा कमेटी का सारांश:

हम घटक के अंदर नेस्टिंग विचारों का समर्थन निकाल रहे हैं। हमने ऐसा करने का फैसला किया क्योंकि इस सुविधा के होने का समर्थन intrinsinc content sizeकरता है<Image> असंभव ; इसलिए जब संक्रमण प्रक्रिया पूरी हो जाती है, तो स्पष्ट रूप से छवि का आकार निर्दिष्ट करने की कोई आवश्यकता नहीं होगी, यह वास्तविक छवि बिटमैप से अनुमान लगाया जा सकता है।

और यह चरण # 0 है।

बहुत सरल ड्रॉप-इन प्रतिस्थापन है जो इस कार्यक्षमता को बहुत सरल स्टाइल के माध्यम से लागू करता है। कृपया, इसके बजाय यदि आप कुछ अंदर रखना चाहते हैं तो उपयोग करें।

Answer 8

ImageBackground के लिए अद्यतन

चूंकि <Image />कंटेनर का उपयोग थोड़ी देर के लिए किया जाता है, इसलिए सभी उत्तर वास्तव में कुछ महत्वपूर्ण याद करते हैं। उचित उपयोग के लिए और सहारा के <ImageBackground />साथ चुनें । सभी छवि प्रासंगिक शैलियों पर लागू करेंstyle imageStyleimageStyle ।

उदाहरण के लिए:

<ImageBackground
    source={yourImage}
    style={{
      backgroundColor: '#fc0',
      width: '100%', // applied to Image
      height: '100%' 
    }}
    imageStyle={{
      resizeMode: 'contain' // works only here!
    }}
>
    <Text>Some Content</Text>
</ImageBackground>

https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js

Answer 9

हे भगवान आखिरकार मुझे रिएक्ट-नेटिव वी 0.52-आरसी और देशी-बेस के लिए एक शानदार तरीका मिल गया है:

आपका कंटेंट टैग कुछ इस तरह होना चाहिए: // =========================================== =======================

<Content contentContainerStyle={styles.container}>
    <ImageBackground
        source={require('./../assets/img/back.jpg')}
        style={styles.backgroundImage}>
        <Text>
            Some text here ...
        </Text>
    </ImageBackground>
</Content>

और आपकी आवश्यक शैली है: // ============================================ ====================

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
backgroundImage:{
    flex : 1,
    width : '100%'
}

यह ठीक काम करता है दोस्तों ... मज़ा है

Comments

नमस्ते, बस यह सुनिश्चित करना चाहते हैं कि ImageBackground कहाँ से आयात किया गया है?

— रूडोल्फ ओपरमैन

ठीक है, इसलिए इमेजबैकग्राउंड I को प्रतिक्रिया-मूल से आयात किया गया है, लेकिन मैं इसके साथ सेट नहीं कर सकता: 100%

— रूडोल्फ ओपरमैन

क्या आपने कभी किसी ऐसे मुद्दे पर भाग लिया जहां यह एंड्रॉइड एमुलेटर पर प्रदर्शित होता है लेकिन डिवाइस पर नहीं?

— रुडोल्फ ओपरमैन

मेरे देर से जवाब के लिए क्षमा करें, आप प्रतिक्रिया मूल से ImageBackground आयात कर सकते हैं: 'रिएक्शन-देशी' से {ImageBackground} आयात करें; चुड़ैल डिवाइस आपने परीक्षण किया? मुझे डिवाइस पर कोई समस्या नहीं मिली।

— अली एसफांदरी

मेरा एमुलेटर नेक्सस 5 स्पेक्स था। और मेरा android Wileyfox Swift था। मुख्य अंतर रिज़ॉल्यूशन था इसलिए मैंने इसे इमेज पर चेक किया और ऐसा लगता है कि यदि इमेज रिज़ॉल्यूशन अधिक है तो आपका डिवाइस इसे नहीं दिखाता है। मैंने शैलियों के साथ छवि को छोटा बनाने की कोशिश की, लेकिन काम नहीं किया इसलिए मैंने छवि के लोअर पर रिज़ॉल्यूशन बदल दिया और अब यह ठीक काम करने लगता है। रिज़ॉल्यूशन कम होना वास्तव में कोई समस्या नहीं थी क्योंकि यह एक लॉगिन स्क्रीन है और इस पर कुछ टेक्स्ट इनपुट और बटन हैं। आपका बहुत बहुत धन्यवाद।

— रुडोल्फ ओपरमैन

Answer 10

0.14 के बाद से यह विधि काम नहीं करेगी, इसलिए मैंने एक स्टैटिक कंपोनेंट बनाया है जो आप लोगों के लिए यह सरल बना देगा। आप बस इसे पेस्ट कर सकते हैं या इसे एक घटक के रूप में संदर्भित कर सकते हैं।

यह पुन: प्रयोज्य होना चाहिए और यह आपको अतिरिक्त शैलियों और गुणों को जोड़ने की अनुमति देगा जैसे कि यह एक मानक <Image />घटक था

const BackgroundImage = ({ source, children, style, ...props }) => {
  return (
      <Image
        source={source}
        style={{flex: 1, width: null, height: null, ...style}}
        {...props}>
        {children}
      </Image>
  );
}

बस इसे पेस्ट करें और फिर आप इसे छवि की तरह उपयोग कर सकते हैं और यह उस दृश्य के पूरे आकार को फिट करना चाहिए, जिसमें (यदि यह शीर्ष दृश्य है तो यह आपकी स्क्रीन को भर देगा।

<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}>
    <Scene styles={styles} {...store} />
</BackgroundImage>

पूर्वावलोकन छवि के लिए यहां क्लिक करें

Answer 11

Oct'17 (RN> = .46) के रूप में नवीनतम

import React from 'react';
import { 
  ...
  ImageBackground,
} from 'react-native';

render() {
  return (
    <ImageBackground source={require('path/to/img')} style={styles.urStyle}>
    </ImageBackground>
  );
}

http://facebook.github.io/react-native/releases/0.49/docs/images.html#background-image-via-nesting

Answer 12

इस उपयोग के मामले को संभालने के लिए, आप उस <ImageBackground>घटक का उपयोग कर सकते हैं , जिसमें समान प्रॉपर है <Image>, और इसमें जो भी बच्चे शामिल हैं, आप उसके ऊपर परत करना चाहेंगे।

उदाहरण:

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

अधिक के लिए: ImageBackground | प्रतिक्रियाशील मूलनिवासी

ध्यान दें कि आपको कुछ चौड़ाई और ऊंचाई शैली की विशेषताओं को निर्दिष्ट करना होगा।

Answer 13

import { ImageBackground } from "react-native";
<ImageBackground
     style={{width: '100%', height: '100%'}}
     source={require('../assets/backgroundLogin.jpg ')}> //path here inside
    <Text>React</Text>
</ImageBackground>

Answer 14

आपको यह सुनिश्चित करने की आवश्यकता है कि आपकी छवि आकार बदलने वाली हैमाडे = {Image.resizeMode.contain} या {Image.resizeMode.stretch} और छवि शैली चौड़ाई शून्य करने के लिए सेट करें

<Image source={CharacterImage} style={{width: null,}} resizeMode={Image.resizeMode.contain}/>

Answer 15

मूल्य अशक्तता के साथ चौड़ाई और ऊंचाई मेरे लिए काम नहीं करती है, तो मैंने शीर्ष, नीचे, बाएँ और दाएँ स्थिति का उपयोग करने के लिए सोचा और यह काम किया। उदाहरण:

bg: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        resizeMode: 'stretch',
},

और JSX:

<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />

Answer 16

(RN> =46)

घटक में बच्चे नहीं हो सकते हैं यदि आप छवि के शीर्ष पर सामग्री को प्रस्तुत करना चाहते हैं, तो पूर्ण स्थिति का उपयोग करने पर विचार करें।

या आप ImageBackground का उपयोग कर सकते हैं

import React from 'react';
import { 
  ...
  StyleSheet,
  ImageBackground,
} from 'react-native';

render() {
  return (
    
  <ImageBackground source={require('path/to/img')} style={styles.backgroundImage} >
      <View style={{flex: 1, backgroundColor: 'transparent'}} />
      <View style={{flex: 3,backgroundColor: 'transparent'}} >
  </ImageBackground>
    
  );
}

const styles = StyleSheet.create({
  backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    },
});

Answer 17

सबसे आसान तरीका पृष्ठभूमि की नकल करना है:

<ImageBackground style={styles.container} source={require('../../images/screen_login.jpg')}>
  <View style={styles.logoContainer}>
    <Image style={styles.logo}
      source={require('../../images/logo.png')}
    />
  </View> 
  <View style={styles.containerTextInput}>
    < LoginForm />
  </View>   
</ImageBackground>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //   backgroundColor:"#0984e3"
  },
  containerTextInput: {
    marginTop: 10,
    justifyContent: 'center'
  },

  logoContainer: {
    marginTop: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logo: {
    height: 150,
    width: 150
  }
});

Answer 18

मेरे लिए यह ठीक काम करता है, मैंने बैकग्राउंड इमेज सेट करने के लिए ImageBackground का उपयोग किया:

import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, ImageBackground } from 'react-native';
const App: () => React$Node = () => {
return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}> 
      <ImageBackground source={require('./Assets.xcassets/AppBackGround.imageset/2x.png')} style={styles.backgroundImage}>
        <View style={styles.sectionContainer}>
              <Text style={styles.title}>Marketing at the speed of today</Text>
        </View>
      </ImageBackground>
      </View>
    </>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    fontFamily: "-apple-system, BlinkMacSystemFont Segoe UI",
    justifyContent: "center",
    alignItems: "center",
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    height: '100%',
    width: '100%'
  },
  title:{
    color: "#9A9A9A",
    fontSize: 24,
    justifyContent: "center",
    alignItems: "center",
  },
sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
});

export default App;

Answer 19

अगर आपने इसे अभी तक हल नहीं किया है, तो रिएक्टिव नेटिव v.0.42.0 का आकार बदल गया है

<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />

Answer 20

import React, { Component } from 'react';
import { Image, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} />
    );
  }
}

const s = StyleSheet.create({
  backgroundImage: {
      flex: 1,
      width: null,
      height: null,
  }
});

आप इसे यहाँ देख सकते हैं: https://sketch.expo.io/B1EAShDie (से: github.com/Dorian/sketch-reactive-native-apps )

डॉक्स: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

Answer 21

आप अपनी छवि को कंटेनर के रूप में भी उपयोग कर सकते हैं:

render() {
    return (
        <Image
            source={require('./images/background.png')}
            style={styles.container}>
            <Text>
              This text will be on top of the image
            </Text>
        </Image>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: undefined,
        height: undefined,
        justifyContent: 'center',
        alignItems: 'center',
      },
});

Answer 22

मैंने BackgroundImage का उपयोग करने के बारे में सुना है क्योंकि भविष्य में आप छवि टैग को घोंसला नहीं दे पाएंगे। लेकिन मैं बैकग्राउडइमेज को ठीक से अपनी पृष्ठभूमि प्रदर्शित करने के लिए नहीं मिला। मैंने जो किया वह था एक दृश्य टैग के अंदर मेरी छवि घोंसला बनाना और बाहरी दृश्य और छवि दोनों को शैली। कुंजियाँ अशक्त करने के लिए चौड़ाई निर्धारित कर रही थीं, और आकार बदलने के लिए 'खिंचाव' सेट कर रही थीं। नीचे मेरा कोड है:

import React, {Component} from 'react';
import { View, Text, StyleSheet, Image} from 'react-native';

export default class BasicImage extends Component {
	constructor(props) {
	  super(props);

	  this.state = {};
	}

	render() {
		return (
			<View style={styles.container}>
	      <Image 
	        source={this.props.source}
	        style={styles.backgroundImage}
	      />
      </View>
		)
	}
}

const styles = StyleSheet.create({   
		container: {
			flex: 1,
			width: null,
			height: null,
			marginBottom: 50
		},
    text: {
    		marginLeft: 5,
    		marginTop: 22,
    		fontFamily: 'fontawesome',
        color: 'black',
        fontSize: 25,
        backgroundColor: 'rgba(0,0,0,0)',
    },
		backgroundImage: {
			flex: 1,
			width: null,
			height: null,
			resizeMode: 'stretch',
		}
});

Answer 23

Antoine129<ImageBackground> द्वारा पहले से ही कहा गया उपयोग करें । बच्चों के साथ प्रयोग करना अब कम हो गया है।<Image>

class AwesomeClass extends React.Component {
  render() {
    return (
      <ImageBackground source={require('image!background')} style={styles.container}>
        <YourAwesomeComponent/>
      </ImageBackground>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};

Answer 24

एक और आसान उपाय:

<Image source={require('../assets/background.png')}
      style={{position: 'absolute', zIndex: -1}}/>

<View style={{flex: 1, position: 'absolute'}}>

  {/*rest of your content*/}
</View>

Answer 25

मैंने इस कोड का उपयोग करके अपनी पृष्ठभूमि छवि समस्या को हल किया।

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

import { TextInput,Button,IconButton,Colors,Avatar } from 'react-native-paper';

class SignInScreen extends React.Component {

    state = {
       UsernameOrEmail  : '',
       Password : '',
     }
    render() {
      return (
             <ImageBackground  source={require('../assets/icons/background3.jpg')} style {styles.backgroundImage}>
              <Text>React Native App</Text>
            </ImageBackground>
          );
    }
  }


    export default SignInScreen;

    const styles = StyleSheet.create({
     backgroundImage: {
      flex: 1,
      resizeMode: 'cover', // or 'stretch'
     }
   });

Answer 26

ImageBackground की सीमा हो सकती है

वास्तव में, आप सीधे उपयोग कर सकते हैं और यह पदावनत नहीं है।

यदि आप अभिक्रिया मूल में बैकग्राउंड इमेज जोड़ना चाहते हैं और उस बैकग्राउंड इमेज पर अन्य एलिमेंट्स जोड़ना चाहते हैं, तो नीचे दिए गए चरण का पालन करें:

1. एक कंटेनर दृश्य बनाएँ
2. 100% चौड़ाई और ऊंचाई के साथ एक छवि तत्व बनाएं। इसके अलावा resizeMode: 'कवर'
3. स्थिति के साथ छवि तत्व के तहत एक और दृश्य तत्व बनाएँ: 'निरपेक्ष'

यह मेरे द्वारा उपयोग किया जाने वाला कोड है:

import React, { Component } from 'react';
import {Text, View, Image} from 'react-native';
import Screen from '../library/ScreenSize'

export default class MenuScreen extends Component {
    static navigationOptions = {
      header: null
    }
    render() {
        return (
          <View style={{ flex: 1 }}>
            <Image
              style={{
                resizeMode: "cover",
                width: "100%",
                height: "100%",
                justifyContent: "center",
                alignItems: "center",
                opacity: 0.4
              }}
              source={require("../assets/images/menuBackgroundImage.jpg")}
            ></Image>

            <View style={{
                width: Screen.width,
                height: Screen.height * 0.55,
                position: 'absolute',
                bottom: 0}}>
                <Text style={{
                    fontSize: 48
                }}>Glad to Meet You!</Text>
            </View>
          </View>
        );
    }
}

कोडिंग का आनंद लें…।

आउटपुट: