web-dev-qa-db-fra.com

Image plein écran dans React Native

Comment faire un <Image> remplir la zone UIWindow entière dans React Native? Si j'utilisais Autolayout, je définirais une contrainte sur chaque Edge, mais le flux est un paradigme très différent et je ne suis pas un gars du Web. Sans définir manuellement la largeur/hauteur sur mon <Image>, rien ne s'affiche, mais comment puis-je indiquer de manière dynamique que le style est identique à la largeur et à la hauteur de son élément parent, ou au moins à la fenêtre?

iosreact-native
16
Jarsen

Vous devez utiliser flexbox . Voici un exemple complet:

'use strict';

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Image
} = React;

var TestCmp = React.createClass({
  render: function() {
    return (
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={{uri: 'http://lorempixel.com/200/400/sports/5/'}} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    alignItems: 'stretch'
  },
  image: {
    flex: 1
  }
});

AppRegistry.registerComponent('RCTTest', () => TestCmp);

Notez que vous avez besoin d’un conteneur pour vous permettre de définir la flexibilité des éléments qu’il contient. La clé ici est alignItems: 'stretch' pour que le contenu de imageContainer remplisse l'espace disponible.

iOS Simulator Screenshot

35
Colin Ramsay

si vous prenez en charge Android et iOS, vous pouvez utiliser ce code. Vous devez masquer la barre d’outils et la barre d’état.

StatusBar hiden 

return (
        <View style={styles.root_layout}>
            <StatusBar hidden={true} />
            ...
        </View>
    )

Barre d'outils masquée 

static navigationOptions = {
    header: null
}
0
ayac3j