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

Ich wollte der Ansicht ein Vollbildbild hinzufügen, also schreibe ich diesen Code

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 gesehen, um auf die Pixeldichte zuzugreifen, aber nichts über die Bildschirmgröße …

Irgendeine Idee?

(Dies ist veraltet, jetzt können Sie es verwenden BildHintergrund)

So habe ich es gemacht. Die Hauptsache 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,
  }
};

Sie können verwenden flex: 1 Styling auf einem <Image> Element, 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 das loswerden können <View> Wickeln Sie Ihr Bild ein und das wird funktionieren.

Hinweis: Diese Lösung ist veraltet. Bitte beziehen Sie sich auf https://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,
  }
});

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>

Update März 2018 Die Verwendung 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 >

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

Aus irgendeinem Grund hat der resizeMode in meinem Stylesheet nicht richtig funktioniert? 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 oder auchContain verwenden.

Hoffe das hilft!

UPDATE auf ImageBackground

Seit der Verwendung <Image /> Da ein Container für eine Weile veraltet ist, übersehen alle Antworten tatsächlich etwas Wichtiges. Wählen Sie für die richtige Verwendung <ImageBackground /> mit style und imageStyle Stütze. Wenden Sie alle bildrelevanten Stile an imageStyle.

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

Basierend auf der Antwort von Braden Rockwell Napier habe ich das gemacht BackgroundImage 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>