Wie zu Strecken, ein statisches Bild als hintergrund Reagieren die Einheimischen?
Ich möchte ein Hintergrundbild in mein reagieren, native app
ist das Bild kleiner als der Bildschirm, also ich habe zu Strecken.
aber es funktioniert nicht, wenn das Bild geladen asset bundle
var styles = StyleSheet.create({
bgImage: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
resizeMode: 'stretch',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
<Image source={require('image!background')} style={styles.bgImage}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</Image>
sieht es wie folgt aus:
aber es funktioniert gut für remote-image, durch source={{uri: 'background-image-uri'}}
:
Versuchen
resizeMode: 'cover'
? siehe: http://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-nativeInformationsquelleAutor xinthink | 2015-05-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vom Github issue: Bild {erfordern} kaputt ist, Reagieren Nativen Größe, könnten Sie versuchen
<Image style={{width: null, height: null}}
hoffe, dass facebook würde es beheben bald.InformationsquelleAutor Dickeylth
Dem Image-tag sollte in der Regel nicht behandelt werden wie eine container-Ansicht.
Die absolut positioniert wrapper mit Ihr (gestreckt/enthalten) Bild scheint gut zu funktionieren:
Image
sollte nicht behandelt werden als ein container, während das offizielle Dokument schlägt vor, Hintergrund-Bild durch Verschachtelung?Sie können jetzt ImageBackground, wie eine container-Ansicht: medium.com/@hklucher/...
InformationsquelleAutor Jack
Können Sie immer verwenden Sie die
Dimensions
- Modul, um die Breite des Bildschirms und legen Sie Ihr Bild in Breite, Stil, Wert:Scheint es auch seltsam, dass ein remote-image funktioniert...können Sie versuchen, das laden einer lokalen statischen Bild mit der
uri
- syntax mithilfesource={{uri: 'local_image_file_name' isStatic: true}}
.require('image!x')
Ergebnisse in einem Objekt mit fester Breite & Höhe (Größe des Bildes):{"__packager_asset":true,"isStatic":true,"path":"...","uri":"logo","width":591,"height":573}
. Ich werde versuchen, dasuri
form und lassen Sie das Ergebnis wissen, thx!!!InformationsquelleAutor Dave Sibiski