中心图像反应本机加载屏幕

问题描述

背景

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

I have an image placed on a screen meant to show when the screen loads other content.

我想使图像居中，因此它始终在所有设备上居中.

I want to center the image so it is always center on all devices.

问题

当前图像在顶部居中显示.我希望它也可以垂直对齐.另外，还要确保在所有设备上它看起来总是一样的.

Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices.

问题

如何确保所有设备的图像始终居中并且尺寸合适?

What is the solution to make sure the image is always centered and the right size for all devices?

示例

我当前的代码，

在Photoshop中

In Photoshop

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

Image is 300 ResolutionHeight is 776 pxWidth is 600 px

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

I want the image to be centered horizontally and vertically in all devices and look good without pixelating. Natively I know I need to set the image sizes. But from my understanding in React Native I can use on image but then use JSX to handle it being responsive.

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;

推荐答案

您需要为justifyContent and alignItems for centering the`设置<View>的样式.

You need to set the style of <View> for justifyContent andalignItemsfor centering the`.

应该是这样的:

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

或者您可以在<Image>上使用alignSelf使其居中，但仍需要在<View>上添加justifyContent使其垂直居中.

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 center vertically.

这篇关于中心图像反应本机加载屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！