将图像放在包含框的底部答案

【问题标题】：Place image to the bottom of containing box将图像放在包含框的底部
【发布时间】：2017-10-05 00:06:12
【问题描述】：

在 React Native 中，我有这个 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'，但都不起作用。

知道如何将图像推送到容器底部吗？

【问题讨论】：

试试 alignSelf: 'flex-end'

标签： css react-native

【解决方案1】：

很简单，有两种方法

另一种选择：

<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>

Image 组件实际上是绝对定位在底部的。如果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>

此方法用于在所有子组件之间创建均匀的间距。最后一个子组件将位于底部但不是绝对的。仅当您希望在顶部和底部有一个组件，并且如果您希望在中间放置第三个组件时，这才有用。您可以添加任意数量，此方法仅在您不声明太多子组件且总高度超过容器高度时才有用。

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

【讨论】：

【解决方案2】：

您可以使用以下代码将图像固定到 div 的底部。您必须将类名称修改为您的图像使用的名称。

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

这里问了一个类似的问题。

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

【讨论】：

【解决方案3】：

alignItems 和justifyContent 作用于子组件。因此，将Image 包裹在View 中，然后将View 的style 设置为alignItems: "flex-end"。像这样的：

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

【讨论】：