web-dev-qa-db-fra.com

Image d'arrière-plan plein écran dans React Application native

J'essaie de définir une image d'arrière-plan complète sur ma vue de connexion.

J'ai trouvé cette question ici dans Stackoverflow: Quelle est la meilleure façon d'ajouter une image d'arrière-plan en plein écran dans React Native

Alors je l'ai fait comme ça, mais ça n'a pas marché:

enter image description here

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

Je ne sais pas ce que je fais mal. Toute aide serait appréciée.

Edit: Voici l'application, au cas où vous voudriez y jeter un œil -> Exemple d'image d'arrière-plan en taille réelle sur rnplay.org . Je ne sais pas comment le faire modifiable: /

Merci :)

background-imagefullscreenreact-native
7
JV Lobo

Essayez l'une de ces deux méthodes:

Le premier est similaire au vôtre sauf que vous avez position: 'absolute' sur votre formulaire de connexion:

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

La deuxième méthode consiste à utiliser ImageView comme conteneur:

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

Vous devez utiliser le composant ImageBackground. Voir React Native Docs

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

Je faisais une erreur idiote ...

Le composant Texte a un fond blanc, et je pensais que le problème venait de l'image et d'autres choses...

Ainsi, la solution consiste à envelopper les informations à l'intérieur de la balise Image , comme l'ont dit @Cherniv et @kamikazeOvrld, mais également à définir un arrière-plan transparent pour le composant à l'intérieur .

Voici l'exemple pleinement fonctionnel:

enter image description here

Code:

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

Aussi dans rnplay.org

J'espère que cela aide quelqu'un comme moi, lorsque vous écrivez du code toute la journée, votre cerveau ne fonctionne pas aussi bien que vous le souhaitez!

Merci.

4
JV Lobo

Umesh, la réponse à votre problème est déjà clairement énoncée.

Le <Image /> le composant ne contient aucun composant enfant. Ce que vous devez faire est d'utiliser le <ImageBackground /> composant car cela vous permettra d'intégrer d'autres composants à l'intérieur, ce qui les rendra enfants. Donc, dans votre cas, vous devriez faire quelque chose comme ça

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

Remarque: N'oubliez pas d'ajouter flex: 1 or width.

J'espère que ma réponse était suffisamment claire. Merci.

1
SirPhemmiey
 <View style={styles.imageCancel}>
         <TouchableOpacity onPress={() => { this.setModalVisible(!this.state.visible) }}>
                 <Text style={styles.textCancel} >Close</Text>
          </TouchableOpacity>
    </View>
const styles = StyleSheet.create({
 imageCancel: {
         height: 'auto',
         width: 'auto',
         justifyContent:'center',
         backgroundColor: '#000000',
         alignItems: 'flex-end',
    },
     textCancel: {
        paddingTop:25,
        paddingRight:25,
        fontSize : 18,
        color : "#ffffff",
        height: 50,
        },
 }};

enter image description here

0
Keshav Gera