将图像包含箱

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> 

此方法用于创建即使所有子组件之间的间距。最后一个子组件将位于底部，但不是绝对的。只有当你想要顶部和底部的组件，以及如果你想要第三个组件位于中间时，这才是好的。您可以根据需要添加尽可能多的数量，如果您不声明总高度超过容器高度的太多子组件，则此方法将非常有用。

这也取决于你想要达到的目标。如果您正在创建某种品牌或徽标水印，请选择绝对定位的方法。如果不是，请选择第一个替代方案。然后再次使用第三种替代方法，如果您希望其他对象在顶部和底部组件之间均匀分布。