web-dev-qa-db-de.com

Was ist der beste Weg, ein Vollbild-Hintergrundbild in React Native hinzuzufügen?

Ich wollte der Ansicht ein Vollbild hinzufügen, damit ich diesen Code schreibe

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

und definiert den Stil als

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

aber wie soll ich auf diese Weise die tatsächliche iPhone-Bildschirmgröße finden?

Ich habe eine API für den Zugriff auf die Pixeldichte gesehen, aber nichts über die Bildschirmgröße.

Irgendeine Idee?

127
talpaz

Sie können das flex: 1-Styling für ein <Image>-Element verwenden, damit es den gesamten Bildschirm ausfüllt. Sie können dann einen der Modi für die Bildgröße verwenden, damit das Bild das Element vollständig ausfüllt:

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

Stil:

import React from 'react-native';

let { StyleSheet } = React;

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

Ich bin mir ziemlich sicher, dass Sie die <View>-Umhüllung Ihres Bildes loswerden können, und dies wird funktionieren. 

91
Josh

(Dies ist veraltet, jetzt können Sie ImageBackground verwenden.)

So habe ich es gemacht. Das Hauptabkommen bestand darin, die statischen festen Größen zu beseitigen.

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,
  }
};
164
oronbz

Hinweis: Diese Lösung ist alt. Bitte beachten Siehttps://facebook.github.io/react-native/docs/images.html#background-image-via-nesting stattdessen

Versuchen Sie diese Lösung. Es wird offiziell unterstützt. Ich habe es gerade getestet und funktioniert einwandfrei.

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

Gehen Sie wie folgt vor, um es als Hintergrundbild zu verwenden.

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

Ich habe mehrere dieser Antworten mit Android ohne Reaktiverprobung = 0.19.0 ausprobiert. 

Aus irgendeinem Grund funktionierte der resizeMode in meinem Stylesheet nicht ordnungsgemäß? Als Sytlesheet jedoch hatte 

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

und innerhalb des Image-Tags habe ich den resizeMode angegeben: 

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

Es hat perfekt funktioniert! Wie oben erwähnt, können Sie Image.resizeMode.cover verwenden oder auch.

Hoffe das hilft! 

19
Tab

Basierend auf Braden Rockwell Napier 's answer habe ich diese BackgroundImage-Komponente erstellt

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>
11
Ryan Wu

Wenn Sie es als Hintergrundbild verwenden möchten, müssen Sie die neue <ImageBackground>-Komponente verwenden, die Ende Juni 2017 eingeführt wurde in Version 0.46. Es unterstützt die Verschachtelung, während <Image> bald nicht mehr funktioniert.

Hier ist die commit - Zusammenfassung:

Wir entfernen die Unterstützung für das Schachteln von Ansichten innerhalb der Komponente. Wir haben uns dafür entschieden, weil diese Funktion durch die Unterstützung von intrinsinc content size des <Image> unmöglich; also wenn der Wenn der Übergangsprozess abgeschlossen ist, müssen Sie nicht das Bild angeben Größe explizit, kann aus der aktuellen Bild-Bitmap abgeleitet werden.

Und das ist der Schritt # 0.

ist ein sehr einfacher Drop-In-Ersatz, der .__ implementiert. diese Funktionalität durch sehr einfaches Styling. Benutzen Sie bitte anstatt, wenn Sie etwas setzen wollen Innerhalb.

11
antoine129

Oh Gott Endlich finde ich einen guten Weg für React-Native V 0.52-RC und Native-Base:

Ihr Content-Tag sollte ungefähr so ​​aussehen: // ===================================== ============================

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

Und Ihr wesentlicher Stil ist: // ======================================= =========================

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

Es funktioniert gut Freunde ... viel Spaß 

8
Ali Esfandiari

Update März 2018 Verwenden von Image ist veraltet. Verwenden Sie 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 >
6
Hitesh Sahu

UPDATE zu ImageBackground

Da die Verwendung von <Image /> als Container für eine gewisse Zeit veraltet ist, fehlt allen Antworten tatsächlich etwas Wichtiges. Zur korrekten Verwendung wählen Sie <ImageBackground /> mit styleundimageStyle prop. Wenden Sie alle für Image relevanten Stile auf imageStyle an.

Zum Beispiel:

<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

5
Pawel

Späteste Okt. 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

4
Adesh Shah

Seit 0.14 funktioniert diese Methode nicht, daher habe ich eine statische Komponente erstellt, die dies für Sie einfach macht. Sie können dies einfach einfügen oder als Komponente referenzieren. 

Dies sollte wiederverwendbar sein und Sie können zusätzliche Stile und Eigenschaften hinzufügen, wenn es sich um eine <Image />-Standardkomponente handelt

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

fügen Sie einfach dieses ein und dann können Sie es wie ein Bild verwenden. Es sollte sich auf die gesamte Größe der Ansicht beziehen, in der es sich befindet (wenn es also die Draufsicht ist, füllt es Ihren Bildschirm.

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

Hier klicken für ein Vorschaubild

Sie müssen sicherstellen, dass Ihr Image über resizeMode = {Image.resizeMode.contain} oder {Image.resizeMode.stretch} verfügt und die Breite des Bildstils auf null setzt

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

Verwenden Sie <ImageBackground> wie bereits von antoine129 . Die Verwendung von <Image> mit Kindern ist jetzt veraltet.

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

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};
1
Aung Myat Hein
 import { ImageBackground } from "react-native";
 <ImageBackground
      style={{width: '100%', height: '100%'}}
          source={require('../assets/backgroundLogin.jpg ')}> //path here inside
          <Text>React</Text>
        </ImageBackground>
1
Naved Khan

Die Breite und Höhe mit dem Wert null funktionieren für mich nicht, dann dachte ich, die Position oben, unten, links und rechts zu verwenden, und es hat funktioniert.

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

Und der JSX:

<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />
1
dap1995
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,
  }
});

Sie können es unter: https://sketch.expo.io/B1EAShDie (von: github.com/Dorian/sketch-reactive-native-apps ) versuchen

Dokumente: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

1
Dorian

Sie können Ihr Bild auch als Container verwenden:

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',
      },
});
1
Agu Dondo

falls Sie es noch nicht gelöst haben, haben React Native v.0.42.0 resizeMode

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

(RN> = .46) 

die Komponente darf keine untergeordneten Elemente enthalten, wenn Sie den Inhalt über dem Bild darstellen möchten.

oder Sie könnenImageBackgroundverwenden.

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'
    },
});

1

Einfachste Möglichkeit, Hintergrund zu implementieren:

<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
  }
});
1
Ahmad Sadiq

Ich habe gehört, BackgroundImage verwenden zu müssen, weil Sie das Image-Tag in der Zukunft nicht verschachteln können. Aber ich konnte BackgroudImage nicht dazu bringen, meinen Hintergrund richtig anzuzeigen. Was ich tat, war mein Bild in einem View-Tag zu verschachteln und sowohl die äußere Ansicht als auch das Bild zu gestalten. Mit den Schlüsseln wurde width auf null und resizeMode auf 'stretch' gesetzt. Unten ist mein Code:

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',
		}
});

1
Chris Adams

Ich habe das Problem mit dem Hintergrundbild mit diesem Code behoben.

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'
     }
   });
0
Adeel Ahmed

Eine weitere einfache Lösung:

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

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

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