react-native - react native : Cannot vertically align an image to bottom of the screen

Question

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

App.js

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

Styles.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” block 中的绝对定位根本不会改变输出)。

如何对齐此图像，使其与屏幕底部齐平？我正在物理 Galaxy S9 Android 设备上运行此程序，运行最新版本的react-native。理想情况下，我想使用绝对定位来完成此任务。

Answer 1

想通了。解决方案是根据当前屏幕的物理尺寸计算缩放后的宽度和高度。样式代码如下:

const imageAspectRatio = 1080 / 872;
const scaledWidth = Dimensions.get('window').width;
const scaledHeight = scaledWidth / imageAspectRatio;

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