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

Puede usar el flex: 1estilo en un <Image>elemento 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 puede deshacerse del <View>envoltorio de su imagen y esto funcionará.

(Esto ha quedado en desuso ahora puede usar ImageBackground )

Así es como lo hice. El acuerdo principal era 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,
  }
};

Nota: esta solución es antigua. Consulte https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting en su lugar

Prueba esta solución. Es oficialmente compatible. 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>

Intenté varias de estas respuestas en vano para Android usando react-native version = 0.19.0.

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

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

y, dentro de la etiqueta de 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!

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

Basado en la respuesta de Braden Rockwell Napier , hice este componenteBackgroundImage

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>

ACTUALIZAR a ImageBackground

Dado que el uso <Image />como contenedor está en desuso por un tiempo, todas las respuestas realmente pierden algo importante. Para un uso adecuado, elija <ImageBackground />con style y imageStyle prop. Aplicar todos los estilos relevantes de 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

Si desea utilizarlo como imagen de fondo, deberá utilizar el nuevo <ImageBackground>componente introducido a finales de junio de 2017 en v0.46. Es compatible con la anidación, pero <Image>pronto no.

Aquí está el resumen de confirmación :

Estamos eliminando el soporte de vistas de anidamiento dentro del componente. Decidimos hacer esto porque tener esta característica hace que apoyar intrinsinc content sizelo <Image>imposible; por lo tanto, cuando se complete el proceso de transición, no habrá necesidad de especificar explícitamente el tamaño de la imagen, se puede inferir del mapa de bits de la imagen real.

Y este es el paso # 0.

es un reemplazo directo muy simple que implementa esta funcionalidad a través de un estilo muy simple. Por favor, use en lugar de si quiere poner algo dentro.

Oh Dios Finalmente, encuentro una excelente manera para React-Native V 0.52-RC y native-base:

Su etiqueta de contenido debe ser algo como esto: // ======================================= =======================

<Content contentContainerStyle={styles.container}>
    <ImageBackground
        source={require('./../assets/img/back.jpg')}
        style={styles.backgroundImage}>
        <Text>
            Some text here ...
        </Text>
    </ImageBackground>
</Content>

Y su estilo esencial es: // ========================================== ====================

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
backgroundImage:{
    flex : 1,
    width : '100%'
}

Funciona bien amigos ... diviértete

Desde 0.14 este método no funcionará, así que construí un componente estático que lo hará simple para ustedes. Simplemente puede pegar esto o hacer referencia a él como un componente.

Esto debería ser reutilizable y le permitirá agregar estilos y propiedades adicionales como si fuera un <Image />componente estándar

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

simplemente pegue esto y luego puede usarlo como una imagen y debe ajustarse al tamaño completo de la vista en la que se encuentra (por lo tanto, si es la vista superior, llenará su pantalla.

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

Haga clic aquí para obtener una imagen de vista previa

Lo último a partir del 17 de octubre (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

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

Para manejar este caso de uso, puede usar el <ImageBackground>componente, que tiene los mismos accesorios <Image>y agregarle todos los elementos secundarios que desee superponer.

Ejemplo:

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

Para más información: ImageBackground | Reaccionar nativo

Tenga en cuenta que debe especificar algunos atributos de estilo de ancho y alto.

Debe asegurarse de que su imagen tenga resizeMode = {Image.resizeMode.contain} o {Image.resizeMode.stretch} y establecer el ancho del estilo de imagen en nulo

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

El ancho y la altura con valor nulo no me funcionan, entonces pensé usar la posición superior, inferior, izquierda y derecha y funcionó. Ejemplo:

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

Y el JSX:

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

(RN> = .46)

el componente no puede contener elementos secundarios si desea representar el contenido en la parte superior de la imagen, considere usar un posicionamiento absoluto.

o puedes usar ImageBackground

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

La forma más fácil de implementar el fondo:

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

Para mí esto funciona bien, usé ImageBackground para establecer la imagen de fondo:

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;

en caso de que aún no lo haya resuelto, React Native v.0.42.0 tiene 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,
  }
});

Puede probarlo en: https://sketch.expo.io/B1EAShDie (de: github.com/Dorian/sketch-reactive-native-apps )

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

También puede usar su imagen como contenedor:

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

He oído hablar de tener que usar BackgroundImage porque en el futuro se supone que no podrás anidar la etiqueta Image. Pero no pude obtener BackgroudImage para mostrar correctamente mi fondo. Lo que hice fue anidar mi imagen dentro de una etiqueta de vista y diseñar tanto la vista externa como la imagen. Las teclas estaban configurando el ancho como nulo, y configurando resizeMode como 'estirar'. Debajo está mi código:

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

Use <ImageBackground>como ya dijo antoine129 . El uso <Image>con niños está en desuso ahora.

class AwesomeClass extends React.Component {
  render() {
    return (
      <ImageBackground source={require('image!background')} style={styles.container}>
        <YourAwesomeComponent/>
      </ImageBackground>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
};

Otra solución fácil:

<Image source={require('../assets/background.png')}
      style={{position: 'absolute', zIndex: -1}}/>

<View style={{flex: 1, position: 'absolute'}}>

  {/*rest of your content*/}
</View>

Resolví mi problema de imagen de fondo usando este código.

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 podría tener límite

En realidad, puede usar directamente y no está en desuso.

Si desea agregar una imagen de fondo en React Native y también desea agregar otros elementos en esa imagen de fondo, siga el siguiente paso:

1. Crear una vista de contenedor
2. Cree un elemento de imagen con 100% de ancho y alto. También resizeMode: 'Cover'
3. Cree otro elemento Ver debajo del elemento Imagen con posición: 'absoluto'

Este es el código que uso:

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

Disfruta de la codificación ...

Salida: