將圖像包含箱

Question

的底部在陣營母語，我有這個Image標籤：

  <Image 
       style={imageStyle.content} 
       source={{uri: myImageUri}} 
      /> 

其中有這樣的造型：

const imageStyle = StyleSheet.create({ 
    content:{ 
     flexDirection:'column', 
     alignItems:'flex-end', 
     justifyContent:'flex-end', 
     backgroundColor: '#7CFC00',//light green 
     width: '95%' 
     height: '75%', 
     resizeMode: 'contain' 
    } 
}); 

該圖像生成：

我希望照片出現在底部分配給Image容器的空間。

但是，我無法做到這一點。在造型中，我指定了alignItems:'flex-end'和justifyContent:'flex-end'，但都不起作用。

任何想法如何將圖像推到容器的底部？

Answer 1

您可以使用下面的代碼將圖像修復到div的底部。您必須將類名修改爲圖片使用的類名。

.image{ 
    position: absolute; 
    bottom: 0; 
} 

在這裏提出了一個類似的問題。

How to align an image to the bottom of the div?

Answer 2

alignItems並在子組件justifyContent工作。因此，將Image包裝在View內，然後將View的style設置爲alignItems: "flex-end"。事情是這樣的：

<View style={{ justifyContent: 'flex-end' }}> 
    <Image ... /> 
</View> 

Answer 3

這很簡單，有做

替代一個的方法有兩種：

<View style={{justifyContent: "flex-end", height: 150, width: 150}}> 
    <Image style={{flex: 1, height: 50}} source={require("imageUri")} /> 
</View> 

這並不像絕對定位並不會溢出等內容，如果某些其他子組件在當前的Image組件下聲明，它將移動第一個子組件，並將新子組件放置在底部。

替代二：

<View style={{justifyContent: "flex-end", height: 150, width: 150}}> 
    <Image 
     style={{ 
      flex: 1, 
      height: 50, 
      position: "absolute", 
      bottom: 0, 
      left: 0, 
      zIndex: 33 
     }} 
     source={require("imageUri")} 
    /> 
</View> 

圖像成分確實實際上成爲絕對定位的底部。如果zIndex屬性大於其他任何組件的默認值或修改zIndex值，則該組件將重疊並呈現在其他組件之上。它會隱藏圖像下的內容，就像在CSS中一樣。

另類三：

<View style={{justifyContent: "space-between", height: 150, width: 150}}> 
    <Image style={{flex: 1, height: 50}} source={require("imageUri")} /> 
    <Image style={{flex: 1, height: 50}} source={require("imageUri")} /> 
</View> 

此方法用於創建即使所有子組件之間的間距。最後一個子組件將位於底部，但不是絕對的。只有當你想要頂部和底部的組件，以及如果你想要第三個組件位於中間時，這纔是好的。您可以根據需要添加儘可能多的數量，如果您不聲明總高度超過容器高度的太多子組件，則此方法將非常有用。

這也取決於你想要達到的目標。如果您正在創建某種品牌或徽標水印，請選擇絕對定位的方法。如果不是，請選擇第一個替代方案。然後再次使用第三種替代方法，如果您希望其他對象在頂部和底部組件之間均勻分佈。