Estoy tratando de establecer una completa imagen de fondo en mi inicio de sesión de la vista.

He encontrado que pregunta en Stackoverflow: ¿Cuál es la mejor manera de agregar un fondo de la pantalla completa de la imagen en Reaccionar Nativo

Así que lo hice como si no, pero no funcionó:

Fondo de la pantalla completa de la imagen en Reaccionar app Nativa

var login = React.createClass({
  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>
      </View>
    );
  }
});

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

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

  loginForm: {
  },
});

No sé lo que estoy haciendo mal. Cualquier ayuda se agradece.

Edición: Aquí es la aplicación, en caso de que usted quiere tomar una mirada -> Tamaño completo de la imagen de fondo de ejemplo en rnplay.org. No sé cómo hacerlo editable :/

Gracias 🙂

  • Envuelva el View con el styles.loginFormestilo dentro de la Image componente
  • <Vista style={ estilos.contenedor }> <fuente de la Imagen={requieren(‘../images/login_background.png’)} style={estilos.backgroundImage} > <Vista style={ estilos.loginForm }> <Texto>PRUEBA</Texto> </View> </Imagen> </View> Como este, ¿verdad? No funcionó :/ -> puu.sh/mIZ9k/7df9341cd6.png
InformationsquelleAutor JV Lobo | 2016-01-25

4 Comentarios

  1. 11

    Intentar cualquiera de estos dos métodos:

    La primera es similar a la tuya, salvo que haya position: 'absolute' en el 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 consiste en utilizar el ImageView como un 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>
        );
    }
    
    • Gracias por tu respuesta. Con el primer método: puu.sh/mJ1xz/dc72257192.png Con la segunda: puu.sh/mJ1CK/493f68bb1c.png Nada funcionó :/
    • Veo que finalmente tengo que trabajar, si la respuesta trabajado para usted, por favor marque aceptado.
    • Seguro que el hombre, gracias 🙂
    • Cómo sobre el rendimiento? Es aceptar el uso de .png o .jpg? O es mejor utilizar algo más?
  2. 5

    Debe utilizar ImageBackground componente. Ver Reaccionar Nativo Docs

    <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
        <Text>Inside</Text>
    </ImageBackground>
    
    • Esta es la mejor y la solución impresionante! esto salvó mi día…
    • Me alegro!
  3. 2

    Yo estaba haciendo un tonto error…

    Texto componente tiene un fondo blanco, y pensé que el problema era con el Imagen y esas cosas…

    Así, la solución es ajustar la información dentro de la Imagen etiqueta, como @Cherniv y @kamikazeOvrld dijo, sino también el conjunto de fondo transparente para el componente en su interior.

    Aquí es el ejemplo de trabajo:

    Fondo de la pantalla completa de la imagen en Reaccionar app Nativa

    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 se escribe código de todo el día, su cerebro no funciona tan bien como le gustaría!

    Gracias.

    • Cómo sobre el rendimiento? Es aceptar el uso de .png o .jpg? O es mejor utilizar algo más?
    • Hola tengo bilowe error –> El <Imagen> componente no puede contener a los niños. Si desea procesar el contenido en la parte superior de la imagen, considere el uso de la <ImageBackground> componente o posicionamiento absoluto.
  4. 1

    Umesh, la respuesta a tu problema ya se ha indicado claramente.

    La <Image /> componente no contiene ningún componente niños. Lo que usted necesita hacer es utilizar el <ImageBackground /> componente que permite incrustar otros componentes dentro de ella haciendo que ellos como niños. Así que, en su caso, usted debe hacer algo como esto

    <ImageBackground>
    <Text>Write your text and some other stuffs here...</Text>
    </ImageBackground>

    Nota: no te olvides de añadir flex: 1 or width.

    Espero que mi respuesta fue bastante clara.
    Gracias.

Dejar respuesta

Please enter your comment!
Please enter your name here