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

148

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 definierte 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?

Talpaz
quelle
Wie wäre es mit Leistung? Ist es in Ordnung zu benutzen .pngoder .jpg? Ist es in Ordnung, ein Hintergrundbild im App-Verzeichnisbaum zu speichern? Oder ist es besser, etwas anderes zu verwenden? .svgoder irgendwas?
Grün

Antworten:

112

Sie können flex: 1ein <Image>Element mit einem Styling versehen , damit es den gesamten Bildschirm ausfüllt. Sie können dann einen der Bildgrößenänderungsmodi 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>Verpackung Ihres Bildes loswerden können, und das wird funktionieren.

Josh
quelle
1
Yup, es funktioniert, habe ich das Bildelement als oben bewegt am meisten und setzen Sie den Stil als backgroundImage:{ justifyContent: 'center', alignItems: 'center', flex: 1, resizeMode: Image.resizeMode.contain, },Dank
Talpaz
4
Nachdem ich eine Weile damit zu kämpfen hatte, fand ich es am einfachsten, die ImageKomponente in einer absolut positionierten Position zu verpacken View, damit das Hintergrundbild hinter anderen Inhalten auf dem Bildschirm angezeigt werden kann.
Josh Habdas
3
Wichtige Änderung: <Image src=...>ist jetzt<Image source=...>
Benutzername
Würden Sie diese Antwort ändern, nachdem der Z-Index unterstützt wird?
Makenova
Es ist in Ordnung, aber das Bild wird gedehnt und der Bildlauf wird auf dem Bildschirm aktiviert
Ananta Prasad
176

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

So habe ich es gemacht. Das Hauptgeschäft war, die statischen festen Größen loszuwerden.

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,
  }
};
oronbz
quelle
1
Ja, so sollte es von docs gemacht werden facebook.github.io/react-native/docs/…
Daniel Steigerwald
15
Dies ist die beste Antwort!
Vanson Wing Leung
3
Danke dir! Stellen Sie sicher, dass dies ImageIhre erste zurückgegebene Komponente ist, der Container. Zuerst habe ich die zufällig verschachtelt Imageein innerhalb , Viewdass der Behälter war.
Glavin001
6
YellowBox.js: 76 Die Verwendung von <Bild> mit Kindern ist veraltet und wird in naher Zukunft ein Fehler sein. Bitte überdenken Sie das Layout oder verwenden Sie stattdessen <ImageBackground>. Wenn ich <Bild> Inhalte hinzufüge, wird diese Warnung angezeigt. es ist wirklich nervig.
Benjamin Wen
4
das ist eigentlich veraltet. Verwenden Sie ImageBackground oder (beste) Position: absolut
Mike
42

Hinweis: Diese Lösung ist alt. Weitere Informationen finden Sie stattdessen unter https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

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

Und um es als Hintergrundbild zu verwenden, gehen Sie einfach wie folgt vor.

<Image style={styles.backgroundImage}>
  <View>
    <Text>All your stuff</Text>
  </View>
</Image>
Vinod Sobale
quelle
Was zum, wird das offiziell unterstützt?
rclai
1
Ja. Es ist. facebook.github.io/react-native/docs/…
Vinod Sobale
Was nützt alignSelfund widthhier?
Harkirat Saluja
Sie strecken <Image /> auf die verfügbare Breite und die Breite muss null sein, damit 'Strecken' funktioniert
Vinod Sobale
Zu Ihrer Information, Bildkomponenten dürfen in der neuesten Version von React (0.51.0) keine Kinder haben. Das funktioniert nicht mehr.
Rplankenhorn
20

Ich habe mehrere dieser Antworten ohne Erfolg für Android mit der reaktionsnativen Version = 0.19.0 ausprobiert.

Aus irgendeinem Grund funktionierte der resizeMode in meinem Stylesheet nicht richtig? Allerdings, wenn Sytlesheet 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 enthalten.

Hoffe das hilft!

Tab
quelle
16

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 >
Hitesh Sahu
quelle
1
Dies ist richtig, jetzt müssen Sie ImageBackground verwenden, Image als Container ist veraltet. Eine Ansicht als Container ist hier nicht erforderlich. Sie können nur ImageBackground als Hauptcontainer verwenden.
Diego Unanue
13

Basierend auf Braden Rockwell Napier ‚s Antwort , habe ich dieseBackgroundImage Komponente

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

Wenn Sie es als Hintergrundbild verwenden möchten, müssen Sie die neue <ImageBackground>Komponente verwenden , die Ende Juni 2017 in Version 0.46 eingeführt wurde. Es unterstützt das Verschachteln, <Image>wird es aber bald nicht mehr.

Hier ist die Commit- Zusammenfassung:

Wir entfernen die Unterstützung für Verschachtelungsansichten innerhalb der Komponente. Wir haben uns dazu entschlossen, weil diese Funktion die Unterstützung intrinsinc content sizevon unterstützt <Image> Unmöglichen unmöglich macht. Wenn der Übergangsprozess abgeschlossen ist, muss die Bildgröße nicht explizit angegeben werden. Sie kann aus der tatsächlichen Bildbitmap abgeleitet werden.

Und das ist der Schritt # 0.

ist ein sehr einfacher Drop-In-Ersatz, der diese Funktionalität durch ein sehr einfaches Styling implementiert. Bitte verwenden Sie anstelle von, wenn Sie etwas hineinstecken möchten.

Antoine129
quelle
11

UPDATE zu ImageBackground

Da die Verwendung <Image />als Container für eine Weile veraltet ist, fehlt allen Antworten tatsächlich etwas Wichtiges. Für den richtigen Gebrauch wählen Sie <ImageBackground />mit style und imageStyle Stütze. Wenden Sie alle bildrelevanten Stile auf animageStyle .

Beispielsweise:

<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

Pawel Sas
quelle
9

Oh Gott Endlich finde ich einen großartigen 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ß

Ali Esfandiari
quelle
Hallo, möchten Sie nur sicherstellen, dass ImageBackground von wo importiert wird?
Rudolph Opperman
OK, also ImageBackground, das ich aus React-Native importiert habe, kann ich jedoch nicht festlegen mit: 100%
Rudolph Opperman
Haben Sie jemals ein Problem festgestellt, bei dem es auf dem Android Emulator angezeigt wird, jedoch nicht auf dem Gerät?
Rudolph Opperman
Entschuldigung für meine späte Antwort, Sie können ImageBackground von React Native importieren: {ImageBackground} von 'react-native' importieren; Welches Gerät hast du getestet? Ich habe kein Problem auf dem Gerät gefunden.
Ali Esfandiari
Mein Emulator war eine Nexus 5-Spezifikation. Und mein Android war Wileyfox Swift. Der Hauptunterschied war die Auflösung, also habe ich sie auf dem Bild überprüft und es scheint, als ob wenn die Bildauflösung höher ist als auf Ihrem Gerät, sie nicht angezeigt wird. Ich habe versucht, das Bild mit Stilen zu verkleinern, aber es hat nicht funktioniert. Deshalb habe ich die Auflösung auf dem Bild niedriger geändert und jetzt scheint es gut zu funktionieren. Die niedrigere Auflösung war nicht wirklich ein Problem, da es sich um einen Anmeldebildschirm handelt und einige Texteingaben und Schaltflächen darauf sind. Vielen Dank.
Rudolph Opperman
4

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

Dies sollte wieder verwendbar sein und es erlaubt Ihnen , zusätzliche Stile und Eigenschaften hinzuzufügen als-ob es sich um eine Standard waren <Image />Komponente

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

Fügen Sie dies einfach ein und dann können Sie es wie ein Bild verwenden und es sollte zur gesamten Größe der Ansicht passen, in der es sich befindet (wenn es also die Draufsicht ist, wird es Ihren Bildschirm ausfüllen.

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

Klicken Sie hier für ein Vorschaubild

Braden Rockwell Napier
quelle
3

Um diesen Anwendungsfall zu behandeln, können Sie die <ImageBackground>Komponente verwenden, die dieselben Requisiten wie hat <Image>, und alle untergeordneten Elemente hinzufügen, die Sie darüber legen möchten.

Beispiel:

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

Für mehr: ImageBackground | Native reagieren

Beachten Sie, dass Sie einige Stilattribute für Breite und Höhe angeben müssen.

TPM ABDULKAREEM
quelle
2

Sie müssen sicherstellen, dass Ihr Bild resizeMode = {Image.resizeMode.contain} oder {Image.resizeMode.stretch} hat, und die Breite des Bildstils auf null setzen

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

Die Breite und Höhe mit dem Wert null funktioniert bei mir nicht, dann habe ich mir überlegt, die Positionen oben, unten, links und rechts zu verwenden, und es hat funktioniert. Beispiel:

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

Und die JSX:

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

(RN> = 0,46)

Die Komponente darf keine untergeordneten Elemente enthalten, wenn Sie Inhalte über dem Bild rendern möchten. Verwenden Sie die absolute Positionierung.

oder Sie können ImageBackground verwenden

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

Hamid Reza Salimian
quelle
2

Der einfachste Weg, um den 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
  }
});
Ahmad Sadiq
quelle
2
 import { ImageBackground } from "react-native";
 <ImageBackground
      style={{width: '100%', height: '100%'}}
          source={require('../assets/backgroundLogin.jpg ')}> //path here inside
          <Text>React</Text>
        </ImageBackground>
Naved Khan
quelle
2

Für mich funktioniert das gut, ich habe ImageBackground verwendet, um das Hintergrundbild festzulegen:

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;
Abdul Karim Khan
quelle
1

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

<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />
user7103816
quelle
1
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 versuchen unter: https://sketch.expo.io/B1EAShDie (von: github.com/Dorian/sketch-reactive-native-apps )

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

Dorian
quelle
1

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

Ich habe gehört, dass Sie BackgroundImage verwenden müssen, weil Sie das Image-Tag in Zukunft möglicherweise nicht mehr verschachteln können. Aber ich konnte BackgroudImage nicht dazu bringen, meinen Hintergrund richtig anzuzeigen. Ich habe mein Bild in einem View-Tag verschachtelt und sowohl die äußere Ansicht als auch das Bild formatiert. Die Schlüssel setzten die Breite auf null und resizeMode auf 'strecken'. 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',
		}
});

Chris Adams
quelle
1

Verwenden Sie <ImageBackground>wie bereits von Antoine129 gesagt . Die Verwendung <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,
  }
};
Aung Myat Hein
quelle
0

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>
Serdar Değirmenci
quelle
0

Ich habe mein Problem mit dem Hintergrundbild mit diesem Code gelöst.

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'
     }
   });
Adeel Ahmed Baloch
quelle
-1

ImageBackground hat möglicherweise ein Limit

Eigentlich können Sie direkt verwenden und es ist nicht veraltet.

Wenn Sie ein Hintergrundbild in React Native hinzufügen und weitere Elemente zu diesem Hintergrundbild hinzufügen möchten, führen Sie die folgenden Schritte aus:

  1. Erstellen Sie eine Containeransicht
  2. Erstellen Sie ein Bildelement mit 100% Breite und Höhe. Auch resizeMode: 'Cover'
  3. Erstellen Sie ein weiteres Ansichtselement unter Bildelement mit der Position 'absolut'.

Dies ist der Code, den ich benutze:

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

Viel Spaß beim Codieren ....

Ausgabe:

Dies ist die Ausgabe meines Codes.

Chhay Rith Hy
quelle