居中图像 React Native 加载屏幕

Question

背景

我在屏幕上放置了一张图像，用于显示屏幕何时加载其他内容。

我想使图像居中，使其始终位于所有设备的中心。

问题

目前，图像显示在顶部中心。我也希望它垂直对齐。还要确保它在所有设备上看起来总是一样的。

问题

确保图像始终居中且尺寸适合所有设备的解决方案是什么？

例子，

我当前的代码，

在 Photoshop 中

图片为 300 分辨率 高度为 776 像素 宽度为 600 像素

我希望图像在所有设备中水平和垂直居中，并且看起来不错，没有像素化。本机我知道我需要设置图像大小。但是根据我对 React Native 的理解，我可以在图像上使用，然后使用 JSX 来处理它的响应式。

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

const logo = require('../images/logo.jpg');

const LoadingScreen = () => (
    <View>
        <Image
            style={styles.logo}
            source={logo}
        />
    </View>
);

const styles = StyleSheet.create({
    logo: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 300,
        height: 400,
    },
});

export default LoadingScreen;

原文由 wuno 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要将 <View> 的样式设置为 justifyContent 和 alignItems 以使 <Image> 居中。

应该是这样的：

 const LoadingScreen = () => (
<View style={styles.container}>
    <Image
        style={styles.logo}
        source={logo}
    />
</View>
);

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 300,
    height: 400,
  },
});

Or you can use alignSelf on the <Image> to make it center, but it will still need to add justifyContent on <View> to make it垂直居中。

原文由 Akbar Rachman Gifari II 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

View 容器的样式应为

flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'

高度确保它跨越整个页面，从而使图像成为垂直和水平对齐。

对于图像大小，我认为使用百分比可以解决问题，而不是定义明确的宽度/高度。

原文由 justelouise 发布，翻译遵循 CC BY-SA 3.0 许可协议