Plein écran de l'image d'arrière-plan à Réagir application Native

Je suis en train de définir une complète image de fond sur mon login vue.

J'ai trouvé cette question ici, dans Stackoverflow: Quelle est la meilleure façon d'ajouter une image plein écran de fond de Réagir Natif

Donc je l'ai fait comme là, mais il ne fonctionne pas:

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: Ici est l'application, dans le cas où vous voulez prendre un coup d'oeil -> Pleine taille de l'image d'arrière-plan exemple sur rnplay.org. Je ne sais pas comment le faire modifiable :/

Merci 🙂

Envelopper le View avec le styles.loginFormde style à l'intérieur de la Image composant
<Vue style={ les styles.conteneur }> <source de l'Image={require('../images/login_background.png')} style={les styles.backgroundImage} > <Vue style={ les styles.loginForm }> <Texte>TEST</Texte> </View> </Image> </View> Comme ça, hein? Il ne fonctionne pas :/ -> puu.sh/mIZ9k/7df9341cd6.png

OriginalL'auteur JV Lobo | 2016-01-25

7

Essayez l'une de ces deux méthodes:

La première est semblable à la vôtre, 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 l'ImageView comme un 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>
    );
}
```
Merci pour votre réponse. Avec la première méthode: puu.sh/mJ1xz/dc72257192.png la seconde: puu.sh/mJ1CK/493f68bb1c.png Rien n'y fait :/
Je vois que vous avez finalement réussi à le faire fonctionner, si la réponse a travaillé pour vous, s'il vous plaît marquer accepté.
Assurez-vous de l'homme, merci 🙂
Comment au sujet de la performance? Est-il possible d'utiliser .png ou .jpg? Ou est-il préférable d'utiliser quelque chose d'autre?

OriginalL'auteur kamikazeOvrld

Je faisais une stupide erreur...

Texte composant a un fond blanc, et j'ai pensé que le problème était avec la Image et d'autres choses...

Donc, la solution consiste à envelopper l'info à l'intérieur de la Image tag, comme @Cherniv et @kamikazeOvrld dit, mais aussi mettre sur fond transparent à l'intérieur.

Ici est le travail entièrement exemple:

Plein écran de l'image d'arrière-plan à Réagir application Native

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

Également dans rnplay.org

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

Grâce.

Comment au sujet de la performance? Est-il possible d'utiliser .png ou .jpg? Ou est-il préférable d'utiliser quelque chose d'autre?
Bonjour je suis bilowe erreur --> <Image> composant ne peut pas contenir des enfants. Si vous voulez afficher du contenu sur le dessus de l'image, pensez à utiliser le <ImageBackground> composant ou d'un positionnement absolu.

OriginalL'auteur JV Lobo

2

Vous devez utiliser ImageBackground composant. Voir Réagir Natif Docs
```
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
</ImageBackground>
```
C'est le meilleur et génial solution! cela a sauvé ma journée...
Je suis heureux de vous aider!

OriginalL'auteur Peretz30
0

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

La <Image /> composant ne contient pas tous les enfants de la composante. Ce que vous devez faire est d'utiliser le <ImageBackground /> composant comme cela vous permettra de vous intégrer d'autres composants à l'intérieur en faisant des enfants. Donc, dans votre cas, vous devriez faire quelque chose comme ceci

<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 est assez claire.
Merci.

OriginalL'auteur SirPhemmiey

Vous devez vous connecter pour publier un commentaire.