中央图像反应本地加载屏幕

Question

背景

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

我想使图像居中，这样它在所有设备上都是居中的。

问题

目前，图像显示在顶部中心。我希望它也垂直对齐。还要确保它在所有设备上看起来始终相同。

问题

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

例子，

我当前的代码，

在Photoshop中

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

我希望图像在所有设备中水平和垂直居中，没有像素化也很好看。我自然知道我需要设置图像大小。但是根据我对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;

Answer 1

在视图中设置：

justifycontent:center

在儿童中：

alignself:center

并在任务中执行。

Answer 2

视图容器应该具有如下样式

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

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

对于图像的大小，我认为用百分比代替确定的宽度/高度就可以了。

Answer 3

您需要设置样式

应该是这样的：

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

或者您可以使用在上对齐Self