wake-up-neo.com

Image 'include' resizeMode funktioniert nicht in 'native'

Ich verwende React Native auf einem echten Android-Gerät ... Wenn Sie eine wirklich einfache App mit der folgenden Render-Funktion auf der Haupt-App-Komponente erstellen ...

render() {
  <Image
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
    style={
      {
        flex: 1,
        resizeMode: 'contain',
        backgroundColor: 'yellow'
      }          
    } />
}

Ich erhalte auf meinem Gerät folgendes Ergebnis: screenshot_2016-04-05-11-05-41

Wie Sie sehen, ist der gesamte Hintergrund gelb, so dass das Bildelement tatsächlich die gesamte Bildschirmgröße annimmt. Aber es ist nur falsch gerendert..__ Der 'cover' resizeMode funktioniert wie erwartet (und auch der 'stretch' Modus) ..__ Der 'include' Modus funktioniert nicht (der wichtigste von Mein Standpunkt) Das Problem wird noch schlimmer, wenn das Bild in einer ListView platziert wird, da das Bild nicht einmal angezeigt wird.

UPDATE 1 Wie Frederick hervorhebt, funktioniert "include" nur, wenn das Bild größer als die Größe des Containers ist. Wie können wir also das Bild so gestalten, dass es die gesamte Containergröße einnimmt und dabei das Seitenverhältnis beibehält? Prozentsätze werden von den Stilen in React noch nicht unterstützt, und ich weiß nicht, wie die Bildbreite und -höhe ermittelt werden kann, sobald das Bild vorhanden ist geladen Keines der Ereignisse, die der Image-Komponente zugeordnet sind, enthält diese Informationen.

UPDATE 2 Gute Nachrichten. Ich verwende jetzt React Native v0.24.1, und es scheint, als würde der Image-Contain-Modus jetzt wie erwartet funktionieren, selbst wenn die tatsächliche Image-Größe kleiner als der Container ist. Die Lösung von Zvona ist gut (obwohl Sie daran denken müssen) Dieses onLayout gibt Ihnen die Bildansichtsgröße an, in der das Bild gerendert wird, NICHT jedoch die tatsächlich geladene Bildgröße. Momentan kenne ich keine Möglichkeit, die tatsächliche Bildgröße herauszufinden. Angenommen, Sie rufen das Bild von einer Netzwerkressource ab, und Sie kennen die Größe nicht. Dies kann sehr wichtig sein, wenn Sie berechnen möchten das Seitenverhältnis).

15
user3621841

Meine Antwort aufAKTUALISIERTTeil der Frage:

<Image source={{uri:'...'}} onLayout={this.onImageLayout} />

woher:

onImageLayout: function(data){
  console.log('layout', data.nativeEvent.layout);
}

Diese sollten auf Gerätebreite + Höhe abgestimmt sein, die Sie erhalten mit:

const {
  Dimensions,
  .
  .
  .
} = React;

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

Wenn Sie Breite/Höhe als Prozentsatz in Stilen erhalten möchten, definieren Sie z. B. Folgendes:

const styles = StyleSheet.create({
  image: {
    width: windowWidth * 0.75,
    height: windowHeight * 0.33
  }          
});
6
zvona

Dies ist die neueste Lösung:

Image.resizeMode.contain funktioniert nicht mit der neuesten Version von React native, also verwende ich es so:

import ImageResizeMode from 'react-native/Libraries/Image/ImageResizeMode'

<Image source={image} resizeMode={ImageResizeMode.contain} />
4
Sagar Chavada

Dies hat bei mir mit dem neuesten Reaktiver 0.37 funktioniert:

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />

Beantworten des aktualisierten Teils der Frage. Sie können die Bildgröße für externe Bilder mit Image.getSize ermitteln. 

Für lokale Bilder ist resolveAssetSource ein nicht so dokumentierter Weg, die Größe herauszufinden und dadurch das Seitenverhältnis zu berechnen. Dabei handelt es sich um ein reaktives Modul (keine externe Bibliothek erforderlich):

let resolveAssetSource = require('resolveAssetSource')
let { width, height } = resolveAssetSource(image_source)
let aspectRatio = width / height
4
ragamufin

Dies ist der Trick:

 render() {
    return (
        <Image
          style={{ flex: 1, height: undefined, width: undefined }}
          source={require("../../resource/image/bg_splash.jpg")}
          resizeMode="contain"
        />

    );
  }
1
Rahul Rastogi

"Einschließen" ändert nur die Bildgröße, wenn die Bildgröße größer ist als der Container, in den Sie es einpassen möchten. In diesem Fall ist der Container der gesamte Bildschirm. Das Bild, das Sie über die URL laden, ist viel kleiner, da es nur 53 x 77 Pixel ist. Also wird die Größe nicht verändert.

Ich denke, "Cover" sollte das tun, was Sie erreichen wollen. Aufgrund der Größe des Bildes sieht es jedoch nicht sehr schön aus, wenn es so vergrößert wird. Hier ein Beispiel gemacht: https://rnplay.org/apps/X5eMEw

0
Frederick Motte