Question

在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'，但都不起作用。

任何想法如何将图像推到容器的底部？

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

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

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

Answer 2

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

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

这里也提出了类似的问题。

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

Answer 3

alignItems和justifyContent处理子组件。因此，将Image包裹在View内，然后将style的{{1}}设置为View。像这样：

alignItems: "flex-end"

将图像放在包含框的底部

3 个答案: