Ich wollte der Ansicht ein Vollbild hinzufügen, damit ich diesen Code schreibe
return (
<View style={styles.container}>
<Image source={require('image!egg')} style={styles.backgroundImage}/>
</View>
)
und definierte den Stil als
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection: 'column',
},
backgroundImage:{
width:320,
height:480,
}
...
aber wie soll ich auf diese Weise die tatsächliche iPhone-Bildschirmgröße finden?
Ich habe eine API für den Zugriff auf die Pixeldichte gesehen, aber nichts über die Bildschirmgröße ...
Irgendeine Idee?
javascript
react-native
Talpaz
quelle
quelle
.png
oder.jpg
? Ist es in Ordnung, ein Hintergrundbild im App-Verzeichnisbaum zu speichern? Oder ist es besser, etwas anderes zu verwenden?.svg
oder irgendwas?Antworten:
Sie können
flex: 1
ein<Image>
Element mit einem Styling versehen , damit es den gesamten Bildschirm ausfüllt. Sie können dann einen der Bildgrößenänderungsmodi verwenden, damit das Bild das Element vollständig ausfüllt:Stil:
Ich bin mir ziemlich sicher, dass Sie die
<View>
Verpackung Ihres Bildes loswerden können, und das wird funktionieren.quelle
backgroundImage:{ justifyContent: 'center', alignItems: 'center', flex: 1, resizeMode: Image.resizeMode.contain, },
DankImage
Komponente in einer absolut positionierten Position zu verpackenView
, damit das Hintergrundbild hinter anderen Inhalten auf dem Bildschirm angezeigt werden kann.<Image src=...>
ist jetzt<Image source=...>
(Dies ist veraltet, jetzt können Sie ImageBackground verwenden. )
So habe ich es gemacht. Das Hauptgeschäft war, die statischen festen Größen loszuwerden.
quelle
Image
Ihre erste zurückgegebene Komponente ist, der Container. Zuerst habe ich die zufällig verschachteltImage
ein innerhalb ,View
dass der Behälter war.Hinweis: Diese Lösung ist alt. Weitere Informationen finden Sie stattdessen unter https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
Versuchen Sie diese Lösung. Es wird offiziell unterstützt. Ich habe es gerade getestet und funktioniert einwandfrei.
Und um es als Hintergrundbild zu verwenden, gehen Sie einfach wie folgt vor.
quelle
alignSelf
undwidth
hier?Ich habe mehrere dieser Antworten ohne Erfolg für Android mit der reaktionsnativen Version = 0.19.0 ausprobiert.
Aus irgendeinem Grund funktionierte der resizeMode in meinem Stylesheet nicht richtig? Allerdings, wenn Sytlesheet hatte
und innerhalb des Image-Tags habe ich den resizeMode angegeben:
Es hat perfekt funktioniert! Wie oben erwähnt, können Sie Image.resizeMode.cover verwenden oder auch enthalten.
Hoffe das hilft!
quelle
Update März 2018 Verwenden von Image ist veraltet Verwenden Sie ImageBackground
quelle
Basierend auf Braden Rockwell Napier ‚s Antwort , habe ich diese
BackgroundImage
KomponenteBackgroundImage.js
someWhereInMyApp.js
quelle
Wenn Sie es als Hintergrundbild verwenden möchten, müssen Sie die neue
<ImageBackground>
Komponente verwenden , die Ende Juni 2017 in Version 0.46 eingeführt wurde. Es unterstützt das Verschachteln,<Image>
wird es aber bald nicht mehr.Hier ist die Commit- Zusammenfassung:
quelle
UPDATE zu ImageBackground
Da die Verwendung
<Image />
als Container für eine Weile veraltet ist, fehlt allen Antworten tatsächlich etwas Wichtiges. Für den richtigen Gebrauch wählen Sie<ImageBackground />
mitstyle
undimageStyle
Stütze. Wenden Sie alle bildrelevanten Stile auf animageStyle
.Beispielsweise:
https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js
quelle
Oh Gott Endlich finde ich einen großartigen Weg für React-Native V 0.52-RC und native-base:
Ihr Content-Tag sollte ungefähr so aussehen: // ======================================= =======================
Und Ihr wesentlicher Stil ist: // ================================================== ====================
Es funktioniert gut Freunde ... viel Spaß
quelle
Seit 0.14 funktioniert diese Methode nicht mehr, deshalb habe ich eine statische Komponente erstellt, die es euch einfach macht. Sie können dies einfach einfügen oder als Komponente referenzieren.
Dies sollte wieder verwendbar sein und es erlaubt Ihnen , zusätzliche Stile und Eigenschaften hinzuzufügen als-ob es sich um eine Standard waren
<Image />
KomponenteFügen Sie dies einfach ein und dann können Sie es wie ein Bild verwenden und es sollte zur gesamten Größe der Ansicht passen, in der es sich befindet (wenn es also die Draufsicht ist, wird es Ihren Bildschirm ausfüllen.
Klicken Sie hier für ein Vorschaubild
quelle
Spätestens ab dem 17. Oktober (RN> = .46)
http://facebook.github.io/react-native/releases/0.49/docs/images.html#background-image-via-nesting
quelle
Um diesen Anwendungsfall zu behandeln, können Sie die
<ImageBackground>
Komponente verwenden, die dieselben Requisiten wie hat<Image>
, und alle untergeordneten Elemente hinzufügen, die Sie darüber legen möchten.Beispiel:
Für mehr: ImageBackground | Native reagieren
quelle
Sie müssen sicherstellen, dass Ihr Bild resizeMode = {Image.resizeMode.contain} oder {Image.resizeMode.stretch} hat, und die Breite des Bildstils auf null setzen
quelle
Die Breite und Höhe mit dem Wert null funktioniert bei mir nicht, dann habe ich mir überlegt, die Positionen oben, unten, links und rechts zu verwenden, und es hat funktioniert. Beispiel:
Und die JSX:
quelle
(RN> = 0,46)
oder Sie können ImageBackground verwenden
quelle
Der einfachste Weg, um den Hintergrund zu implementieren:
quelle
quelle
Für mich funktioniert das gut, ich habe ImageBackground verwendet, um das Hintergrundbild festzulegen:
quelle
Falls Sie es noch nicht gelöst haben, haben React Native v.0.42.0 resizeMode
quelle
Sie können es versuchen unter: https://sketch.expo.io/B1EAShDie (von: github.com/Dorian/sketch-reactive-native-apps )
Dokumente: https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
quelle
Sie können Ihr Bild auch als Container verwenden:
quelle
Ich habe gehört, dass Sie BackgroundImage verwenden müssen, weil Sie das Image-Tag in Zukunft möglicherweise nicht mehr verschachteln können. Aber ich konnte BackgroudImage nicht dazu bringen, meinen Hintergrund richtig anzuzeigen. Ich habe mein Bild in einem View-Tag verschachtelt und sowohl die äußere Ansicht als auch das Bild formatiert. Die Schlüssel setzten die Breite auf null und resizeMode auf 'strecken'. Unten ist mein Code:
quelle
Verwenden Sie
<ImageBackground>
wie bereits von Antoine129 gesagt . Die Verwendung<Image>
mit Kindern ist jetzt veraltet.quelle
Eine weitere einfache Lösung:
quelle
Ich habe mein Problem mit dem Hintergrundbild mit diesem Code gelöst.
quelle
ImageBackground hat möglicherweise ein Limit
Wenn Sie ein Hintergrundbild in React Native hinzufügen und weitere Elemente zu diesem Hintergrundbild hinzufügen möchten, führen Sie die folgenden Schritte aus:
Dies ist der Code, den ich benutze:
Viel Spaß beim Codieren ....
Ausgabe:
quelle