Imagen de fondo de pantalla completa en la aplicación React Native

Solución:

Debe utilizar el componente ImageBackground. Ver React Native Docs

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

Pruebe cualquiera de estos dos métodos:

El primero es similar al tuyo excepto que tienes position: 'absolute' en su formulario de inicio de sesión:

var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover', // or 'stretch'
    },
    loginForm: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
});

El segundo método implica el uso de ImageView como contenedor:

render: function() {
    return (
        <View style={ styles.container }>
            <Image source={require('../images/login_background.png')} style={styles.backgroundImage}>
                <View style={ styles.loginForm }>
                    <Text>TEST</Text>
                </View>
            </Image>
        </View>
    );
}

Estaba cometiendo un error tonto …

Texto El componente tiene un fondo blanco y pensé que el problema estaba en el Imagen y esas cosas …

Entonces, la solución es envolver la información dentro del Imagen tag, como dijeron @Cherniv y @kamikazeOvrld, pero también establecieron un fondo transparente para el componente dentro de él.

Aquí está el ejemplo completamente funcional:

Código:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  StatusBarIOS
} = React;

StatusBarIOS.setHidden(true);

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={ styles.container }>
        <Image source={{uri: 'http://puu.sh/mJ1ZP/6f167c37e5.png'}} style={styles.backgroundImage} >
          <View style={ styles.loginForm }>
            <Text style={ styles.text }>Some text</Text>
          </View>
        </Image>
      </View>
    );
  }
});

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

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch',
    justifyContent: 'center',
  },

  loginForm: {
    backgroundColor: 'transparent',
    alignItems: 'center',
  },

  text: {
    fontSize: 30,
    fontWeight: 'bold',
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

También en rnplay.org

Espero que ayude a alguien como yo, cuando escribes código todo el día, ¡tu cerebro no funciona tan bien como te gustaría!

Gracias.

---

---

Utiliza Nuestro Buscador