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

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

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>

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! 

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>

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.

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ß 

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 >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>