React Native - Vertikale Bildausrichtung mit resizeMode "contain"

Question

Wenn ein Bild den Größenänderungsmodus "contain" hat, scheint es das tatsächliche Bild in der Mitte auszurichten/auszurichten, der Bildinhalt wird jedoch am Flexstart ausgerichtet/justiert.

<Image resizeMode="contain" ...> 
<Text>Title</Text> 
</Image> 

Mit dem folgenden sehe ich den Text, der über dem Bild erscheint.

Gibt es eine Möglichkeit, das enthaltene Bild vertikal nach oben auszurichten?

Answer 1

Sie müssen Stile auf Ihrem Bild verwenden, um die gewünschte vertikale Ausrichtung festzulegen.

var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <Image source={{uri: "http://placekitten.com/300/505"}} style={styles.image}> 
      <Text style={styles.instructions}> 
      Hello ! 
      </Text> 
     </Image> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'stretch', 
    backgroundColor: '#F5FCFF', 
    }, 
    image: { 
    height: 500, 
    justifyContent: "space-around", // <-- you can use "center", "flex-start", 
    resizeMode: "contain",    //  "flex-end" or "space-between" here 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: 'white', 
    backgroundColor: "transparent", 
    fontSize: 25, 
    }, 
}); 

Siehe https://rnplay.org/apps/9D5H1Q für ein laufendes Beispiel

Answer 2

konnte ich CSS backgroundPosition mit dem folgenden Code simulieren:

<View style={{ overflow: 'hidden' }}> 
    <Image src={{ uri: imageURI }} style={{ height: /*adjust_as_needed*/, resizeMode: 'cover' }} /> 
</View> 

Wegen des Überlaufes: 'versteckt' Ansicht auf dem heigh des Bildes kann justiert werden, ohne die Extrahöhe des Bildes zu sehen. Sie müssen für den Größenänderungsmodus nicht nur den Inhalt, sondern auch den Bereich "cover" verwenden. Andernfalls erhalten Sie ein zentriertes Bild, das nicht so breit ist wie der Container "Ansicht", wenn Sie die Höhe des Bilds zu groß einstellen .

Im oberen Beispiel ist die Bildhöhe (blaue gepunktete Linie) größer als im unteren Beispiel und deshalb sitzt die Mittellinie des Bildes tiefer in der Ansicht. Durch Verringern der Höhe des Bildes (blaue gepunktete Linie) im zweiten Beispiel bewegt sich die Mittellinie des Bildes in der Ansicht nach oben.

Hoffe, das macht Sinn und ich hoffe, es funktioniert für Ihren Anwendungsfall; es hat für die Minen: D

Answer 3

ich das gleiche tun musste. Der beste Weg, um dies zu erreichen, war, die Höhe oder Breite des Bildes explizit anzugeben. Wenn Sie Ihr Bild in eine andere Komponente einfügen, können Sie mit justifyContent die Position des Bildes vollständig steuern.

Es stimmt, dass Sie nicht immer die Breite oder Höhe des Bildes haben. Sehr oft (insbesondere mit resizeMode: 'contain') möchten Sie die Höhe oder Breite relativ zu etwas festlegen. Ich wollte, dass die Höhe der Breite des Ansichtsfensters entspricht. Hier ist die Lösung, die ich verwendet:

<View style={{ flex: 1, justifyContent: 'flex-start' }}> 
    <Image 
     source={{ uri: imagePath }} 
     resizeMode="contain" 
     style={{ height: vw(100) }} 
    /> 
</View> 

Die vw ist eine Hilfsfunktion, die von this Antwort kommt.

Answer 4

Sie müssen einige der Werte und die anderen lassen, ohne gesetzt. In den meisten Fällen wurde die Breite festgelegt. Seien Sie vorsichtig mit der Eltern-Flex-Option. Es könnte dein Design verändern.