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

Solución:

(Esto ha quedado obsoleto ahora puede usar ImageBackground)

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 peinar en un <Image> elemento para que llene toda la pantalla. Luego puede usar uno de los modos de cambio de tamaño de la 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 del <View> envolver su 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 su lugar

Prueba esta solución. Tiene soporte oficial. 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>

---

---

Utiliza Nuestro Buscador