wake-up-neo.com

Wie kann man die Bildbreite auf 100% und die Höhe einstellen, um automatisch reagieren zu können?

Ich versuche, eine Liste der Bilder in einem Bildlauf anzuzeigen. Die Breite sollte 100% betragen, während die Höhe automatisch sein sollte und das Seitenverhältnis beibehalten sollte.

Die Durchsuchungen, die ich durchführte, wiesen auf verschiedene Lösungen hin, die den Hintergrund für den Vollbildmodus darstellen.

const styles = StyleSheet.create({
    image: {
        width: null,
        height: 300,
        resizeMode: 'cover'
    }
});

<ScrollView style={{flex: 1}}>
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/>
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/>
</ScrollView>

Ich habe verschiedene Kombinationen von width ausprobiert: null, height: null, flex: 1, alignSelf usw. Die obige Lösung funktioniert fast, außer dass die Höhe nicht dynamisch ist. Teile des Bildes sind nicht sichtbar.

javascriptimagereactjsreact-native
29
Prabhakar Bhat

"resizeMode" ist keine Stileigenschaft. Sollte zu Props der Image-Komponente wie im folgenden Code wechseln.

const win = Dimensions.get('window');

const styles = StyleSheet.create({
    image: {
        flex: 1,
        alignSelf: 'stretch',
        width: win.width,
        height: win.height,
    }
});

...
    <Image 
       style={styles.image}
       resizeMode={'contain'}   /* <= changed  */
       source={require('../../../images/collection-imag2.png')} /> 
...

Die Bildhöhe wird nicht automatisch angepasst, da die Image -Komponente sowohl Breite als auch Höhe in style props benötigt wird. Sie müssen also mit der getSize () - Methode selbst berechnen, und Sie können in diese Antwort sehen.

Es gibt viele nützliche Open-Source-Bibliotheken. Die Liste wird unten angezeigt.

24
Lwin Kyaw Myat

Nachdem ich eine Weile darüber nachgedacht hatte, konnte ich die Höhe erreichen: auto in reaktionsnativem Bild ... Sie müssen die Abmessungen Ihres Bildes kennen, damit dieser Hack funktioniert. Öffnen Sie einfach Ihr Bild in einem beliebigen Bildbetrachter, und Sie erhalten die Abmessungen Ihres Bildes in den Dateiinformationen Die von mir verwendete Bildgröße beträgt 541 x 362

Importiere zuerst Dimensionen von React-Native

import { Dimensions } from 'react-native';

dann müssen Sie die Abmessungen des Fensters ermitteln

const win = Dimensions.get('window');

Berechne jetzt das Verhältnis als 

const ratio = win.width/541; //541 is actual image width

jetzt das Bild als Stil hinzufügen 

imageStyle: {
    width: win.width,
    height: 362 * ratio, //362 is actual height of image
}
14
Vinit Kadam

Sie müssen immer die Breite und Höhe einer Image einstellen. Es wird nicht automatisch die Größe für Sie ändern. Die React Native-Dokumente sagt so .

Sie sollten die Gesamthöhe der ScrollView mit onLayout messen und die Höhe der Images basierend darauf festlegen. Wenn Sie resizeMode von cover verwenden, bleibt das Seitenverhältnis Ihrer Images erhalten, aber es wird offensichtlich zugeschnitten, wenn es größer als der Container ist.

5
rclai

Für das Image-Tag können Sie diese Art von Stil verwenden.

imageStyle: {
    width: Dimensions.get('window').width - 23,
    resizeMode: "contain",
    height: 211,
 },
1
kallayya

Ich hatte Probleme mit allen oben genannten Lösungen. Schließlich habe ich aspectRatio verwendet, um den Trick zu machen. Wenn Sie die Bildbreite und -höhe kennen und diese groß sind, berechnen Sie einfach aspectRatio und fügen Sie sie dem Bild wie folgt hinzu:

<PhotoImage
    source={{uri: `data:image/jpeg;base64,${image.base64}`}}
    style={{ aspectRatio: image.width / image.height }}
 />

AspectRatio ist eine Layout-Eigenschaft von React Native, um das Seitenverhältnis des Bildes beizubehalten und in den übergeordneten Container zu passen: https://facebook.github.io/react-native/docs/ Layout-Requisiten # Seitenverhältnis

0
Łukasz Blaszyński