Was ist der beste Weg, um 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 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?

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.

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

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>

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!

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 >

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>

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.

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

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ß

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

Spätestens ab dem 17. Oktober (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

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.

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}/>

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'}} />

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

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

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

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;

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

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

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

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

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

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

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>

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

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: