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?
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.
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
}