¿Cuál es la mejor manera de agregar una imagen de fondo de pantalla completa en React Native?

Quería agregar una imagen de pantalla completa a la Vista, así que escribo este código

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

y definió el estilo como

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

pero de esta manera, ¿cómo se supone que debo encontrar el tamaño real de la pantalla del iPhone?

He visto una API para acceder a la densidad de píxeles, pero nada sobre el tamaño de la pantalla…

¿Alguna idea?

(Esto ha quedado en desuso ahora puede usar ImagenFondo)

Así es como lo he hecho. El trato principal fue deshacerse de los tamaños fijos estáticos.

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

Puedes usar flex: 1 estilo en un <Image> para que ocupe toda la pantalla. Luego puede usar uno de los modos de cambio de tamaño de imagen para que la imagen llene completamente el elemento:

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

Estilo:

import React from 'react-native';

let { StyleSheet } = React;

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

Estoy bastante seguro de que puedes deshacerte de la <View> envolviendo tu imagen y esto funcionará.

Nota: Esta solución es antigua. Por favor refiérase a https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting en cambio

Pruebe esta solución. Se apoya oficialmente. Lo acabo de probar y funciona perfectamente.

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

Y en cuanto a usarlo como imagen de fondo, simplemente haga lo siguiente.

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

Actualización de marzo de 2018 El uso de la imagen está en desuso use 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 >

Probé varias de estas respuestas en vano para Android usando la versión nativa de reacción = 0.19.0.

¿Por alguna razón, el resizeMode dentro de mi hoja de estilo no funcionó correctamente? Sin embargo, cuando la hoja de estilo tenía

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

y, dentro de la etiqueta de la imagen, especifiqué el resizeMode:

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

¡Funcionó perfectamente! Como se mencionó anteriormente, puede usar Image.resizeMode.cover o contener también.

¡Espero que esto ayude!

ACTUALIZAR a ImageBackground

Desde que usa <Image /> como un contenedor está en desuso por un tiempo, todas las respuestas en realidad pierden algo importante. Para un uso adecuado, elija <ImageBackground /> con style y imageStyle apuntalar. Aplicar todos los estilos relevantes de la imagen a imageStyle.

Por ejemplo:

<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

Basado en la respuesta de Braden Rockwell Napier, hice esto BackgroundImage componente

Imagen de fondo.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

algúnDóndeEnMiAplicación.js

 import BackgroundImage from './backgroundImage'
 ....
 <BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
    <Text>Test</Text>
 </BackgroundImage>