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”块中删除此绝对位置根本不会更改输出）。

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

Answer 1

您可以使用排名顶部。我修改了您的style code并放入了示例图片。

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';



export default class App extends React.Component {
  render() {
    return (
          <View style={styles.container}>
    <View style={styles.imageContainer}>
        <Image
            source={{uri: "https://cdn.pixabay.com/photo/2015/07/27/19/47/turtle-863336__340.jpg"}}
            style={styles.largeImage}
            resizeMode='contain'
        />
    </View>
</View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red',
        justifyContent:"flex-end"
    },
    imageContainer: {
        width: '100%',
        height: '70%',
        backgroundColor: 'cyan'

    },
    largeImage: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        top: 100
    } 
});

要将其同等地应用到all devices，而不要使用它，必须调整height的{{1}}值。 image的高度现在为image。但是因为您的100% image是'resizeMode'，所以您试图在中间完成它。如果您的contain是“ image resizeMode”，那么您将填满整个屏幕。因此，您必须调整stretch并指定样式height的值。

应用它的屏幕

justifyContent

Answer 2

您的Image Component实际上是垂直底端，设置backgroundColor就会看到

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

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

Answer 3

弄清楚了。解决方案是根据当前屏幕的物理尺寸计算缩放的宽度和高度。下面的样式代码：

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
    } 
});

Answer 4

请尝试在imageContainer中使用justifyContent: 'flex-end'，而不要使用绝对定位。

以供参考：https://facebook.github.io/react-native/docs/flexbox

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

4 个答案: