时间戳

首页 > 解决方案 > React Native：无法将图像垂直对齐到屏幕底部

react-native - React Native：无法将图像垂直对齐到屏幕底部

问题描述

我正在尝试将大图像与屏幕底部对齐。应该注意的是，图像的宽度（远）大于屏幕的宽度。我的代码如下：

应用程序.js

<View style={styles.container}>
    <View style={styles.imageContainer}>
        <Image
            source={LargeImage}
            style={styles.largeImage}
            resizeMode='contain'
        />
    </View>
</View>

样式.js

const styles = Stylesheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red'
    },
    imageContainer: {
        width: '100%'
        height: '70%',
        position: 'absolute',
        bottom: 0,
        backgroundColor: 'cyan'
    },
    largeImage: {
        width: '100%',
        height: '100%',
        position: 'absolute'
        bottom: 0
    } 
});

上面的代码呈现为： 移动应用截图

其中红色是最上面的容器背景，浅蓝色/青色是图像容器背景，顶部弯曲的深蓝色形状是大图像。出于某种原因，图像在图像容器中居中，尽管我添加了绝对定位（在“largeImage”块中删除这个绝对定位根本不会改变输出）。

如何对齐此图像以使其与屏幕底部齐平？我在物理 Galaxy S9 Android 设备上运行它，运行最新版本的 react-native。理想情况下，我想使用绝对定位来实现这一点。

标签： react-nativereact-native-android

解决方案

你Image Component是实际的垂直底部，设置背景颜色，你会看到它

但是resizeMode='contain'，实际图像（不是图像组件）将调整大小以适合图像组件I。在这种情况下，由于宽度大于高度，因此图像将在图像组件内垂直居中

您需要设置 resizeMode='cover' 或更改绝对属性（顶部、底部）

推荐阅读