Je voulais ajouter une image plein écran à la vue alors j'écris ce code
return (
<View style={styles.container}>
<Image source={require('image!egg')} style={styles.backgroundImage}/>
</View>
)
et défini le style comme
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'column',
},
backgroundImage:{
width:320,
height:480,
}
...
mais de cette façon, comment suis-je censé trouver la taille réelle de l'écran de l'iPhone?
J'ai vu une API pour accéder à la densité de pixels mais rien sur la taille de l'écran ...
Une idée?
javascript
react-native
talpaz
la source
la source
.png
ou.jpg
? Est-il possible de stocker l'image de fond d'écran dans l'arborescence du répertoire des applications? Ou vaut-il mieux utiliser autre chose?.svg
Ou n'importe quoi?Réponses:
Vous pouvez utiliser le
flex: 1
style sur un<Image>
élément pour qu'il remplisse tout l'écran. Vous pouvez ensuite utiliser l'un des modes de redimensionnement de l'image pour que l'image remplisse complètement l'élément:Style:
Je suis presque sûr que vous pouvez vous débarrasser de l'
<View>
emballage de votre image et cela fonctionnera.la source
backgroundImage:{ justifyContent: 'center', alignItems: 'center', flex: 1, resizeMode: Image.resizeMode.contain, },
MerciImage
composant dans une position absolueView
pour permettre à l'image d'arrière-plan d'apparaître derrière un autre contenu à l'écran.<Image src=...>
est maintenant<Image source=...>
(Ceci est désormais obsolète, vous pouvez utiliser ImageBackground )
Voilà comment je l'ai fait. L'essentiel était de se débarrasser des tailles fixes statiques.
la source
Image
votre premier composant est renvoyé, le conteneur. Au début, j'ai accidentellement imbriqué leImage
dans unView
qui était le conteneur.Remarque: cette solution est ancienne. Veuillez plutôt vous référer à https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
Essayez cette solution. Il est officiellement pris en charge. Je viens de le tester et fonctionne parfaitement.
Et pour l'utiliser comme image d'arrière-plan, procédez comme suit.
la source
alignSelf
etwidth
ici?J'ai essayé plusieurs de ces réponses en vain pour Android en utilisant la version react-native = 0.19.0.
Pour une raison quelconque, le resizeMode dans ma feuille de style ne fonctionnait pas correctement? Cependant, lorsque Sytlesheet avait
et, dans la balise Image, j'ai spécifié le resizeMode:
Cela a parfaitement fonctionné! Comme mentionné ci-dessus, vous pouvez utiliser Image.resizeMode.cover ou contenir également.
J'espère que cela t'aides!
la source
Mise à jour de mars 2018 L'utilisation d'Image est déconseillée Utiliser ImageBackground
la source
Sur la base de la réponse de Braden Rockwell Napier , j'ai créé ce composant
BackgroundImage
BackgroundImage.js
someWhereInMyApp.js
la source
MISE À JOUR vers ImageBackground
Étant donné que l'utilisation en
<Image />
tant que conteneur est obsolète pendant un certain temps, toutes les réponses manquent en fait quelque chose d'important. Pour une utilisation correcte, choisissez<ImageBackground />
avecstyle
etimageStyle
prop. Appliquer tous les styles pertinents pour l'image àimageStyle
.Par exemple:
https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js
la source
Si vous souhaitez l'utiliser comme image d'arrière-plan, vous devrez utiliser le nouveau
<ImageBackground>
composant introduit fin juin 2017 dans la v0.46. Il prend en charge l'imbrication alors que<Image>
bientôt pas.Voici le résumé du commit :
la source
Oh mon Dieu Enfin, je trouve un excellent moyen pour React-Native V 0.52-RC et native-base:
Votre balise de contenu devrait ressembler à ceci: // ======================================== ========================
Et votre style essentiel est: // =========================================== =====================
Ça marche de bons amis ... amusez-vous
la source
Depuis la version 0.14, cette méthode ne fonctionnera pas, j'ai donc créé un composant statique qui vous simplifiera la tâche. Vous pouvez simplement le coller ou le référencer en tant que composant.
Cela devrait être réutilisable et vous permettra d'ajouter des styles et des propriétés supplémentaires comme s'il s'agissait d'un
<Image />
composant standardcollez-le simplement et vous pourrez l'utiliser comme une image et il devrait s'adapter à la taille entière de la vue dans laquelle il se trouve (donc s'il s'agit de la vue de dessus, il remplira votre écran.
Cliquez ici pour une image de prévisualisation
la source
Dernier en octobre 2017 (RN> = 0,46)
http://facebook.github.io/react-native/releases/0.49/docs/images.html#background-image-via-nesting
la source
la source
Pour gérer ce cas d'utilisation, vous pouvez utiliser le
<ImageBackground>
composant, qui a les mêmes accessoires que<Image>
, et y ajouter les enfants que vous souhaitez superposer.Exemple:
Pour en savoir plus: ImageBackground | Réagir natif
la source
Vous devez vous assurer que votre image a resizeMode = {Image.resizeMode.contain} ou {Image.resizeMode.stretch} et définir la largeur du style d'image sur null
la source
La largeur et la hauteur avec la valeur null ne fonctionnent pas pour moi, alors j'ai pensé à utiliser la position haut, bas, gauche et droite et cela a fonctionné. Exemple:
Et le JSX:
la source
(RN> = 0,46)
ou vous pouvez utiliser ImageBackground
la source
Moyen le plus simple d'implémenter l'arrière-plan:
la source
Pour moi, cela fonctionne bien, j'ai utilisé ImageBackground pour définir l'image d'arrière-plan:
la source
au cas où vous ne l'auriez pas encore résolu, React Native v.0.42.0 a resizeMode
la source
Vous pouvez l'essayer sur: https://sketch.expo.io/B1EAShDie (de: github.com/Dorian/sketch-reactive-native-apps )
Documentation: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
la source
Vous pouvez également utiliser votre image comme conteneur:
la source
J'ai entendu parler de l'utilisation de BackgroundImage car à l'avenir, vous ne pourrez plus imbriquer la balise Image. Mais je n'ai pas pu obtenir BackgroudImage pour afficher correctement mon arrière-plan. Ce que j'ai fait, c'est d'imbriquer mon image dans une balise View et de styliser à la fois la vue extérieure et l'image. Les clés définissaient width sur null et resizeMode sur «stretch». Voici mon code:
la source
Utilisez
<ImageBackground>
comme déjà dit par antoine129 . L'utilisation<Image>
avec des enfants est désormais obsolète.la source
Une autre solution simple:
la source
J'ai résolu mon problème d'image d'arrière-plan en utilisant ce code.
la source
ImageBackground peut avoir une limite
Si vous souhaitez ajouter une image d'arrière-plan dans React Native et souhaitez également ajouter d'autres éléments à cette image d'arrière-plan, suivez l'étape ci-dessous:
Voici le code que j'utilise:
Profitez du codage ....
Production:
la source