React Native - pionowe wyrównanie obrazu z resizeMode "zawierają"

Question

Gdy obraz ma tryb zmiany rozmiaru "zawiera", wydaje się, że wyrównuje/uzasadnia rzeczywisty obraz w środku, treść obrazu jest jednak wyrównana/uzasadniona przy flex start.

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

Z poniższym tekstem pojawia się nad obrazem.

Czy istnieje sposób pionowego wyrównania zawartego obrazu do góry?

Answer 1

Musisz użyć stylów na obrazku, aby ustawić pionowe wyrównanie, które chcesz.

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, 
    }, 
}); 

Zobacz https://rnplay.org/apps/9D5H1Q dla uruchomionego przykład

Answer 2

byłem w stanie symulować CSS backgroundPosition stosując następujący kod:

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

powodu przelewu: 'ukryty' na Zobacz Wysokość obrazu można regulować, nie widząc dodatkowej wysokości obrazu. Będziesz musiał użyć 'okładki' zamiast "zawierać" dla trybu zmiany rozmiaru, w przeciwnym razie skończysz z wyśrodkowanym obrazem, który nie jest tak szeroki jak kontener Widok, jeśli ustawisz zbyt dużą wysokość obrazu .

W górnym przykładzie poniżej wysokość obrazu (niebieska linia przerywana) jest większa niż dolny przykład i dlatego środkowa linia obrazu znajduje się niżej w widoku. Zmniejszając wysokość obrazu (niebieska linia przerywana) w drugim przykładzie, środkowa linia obrazu przesuwa się w górę w widoku.

Mam nadzieję, że to ma sens i mam nadzieję, że zadziała w twoim przypadku użycia; to nie dla kopalni: D

Answer 3

muszę zrobić to samo. Najlepszym sposobem na osiągnięcie tego było wyraźne podanie wysokości lub szerokości obrazu. Następnie, zawijając obraz w innym komponencie, możesz użyć opcji justifyContent, aby uzyskać pełną kontrolę nad pozycją obrazu.

To prawda, że ​​nie zawsze możesz mieć szerokość lub wysokość obrazu. Jednak dość często (szczególnie przy użyciu resizeMode: "zawierają") chcesz ustawić wysokość lub szerokość względem czegoś. Chciałem, aby wysokość była równa szerokości widoku. Oto rozwiązanie, które użyłem:

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

VW jest funkcją pomocnik, który pochodzi z this odpowiedź.

Answer 4

Musisz naprawić niektóre wartości, a druga niech bez zestawu. w większości przypadków niech szerokość jest stała. Bądź ostrożny z opcją rodzica flex. To może zmienić twój projekt.