中心图像反应原生加载屏幕

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;

Answer 1

你需要<View>为justifyContent andalignItems 设置样式for 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,
  },
});

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

Answer 2

View容器应该具有样式

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

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

对于图像大小,我认为使用百分比将成功,而不是定义明确的宽度/高度.

Answer 3

在视图中设置：

justifycontent:center

而在孩子：

alignself:center

并在任务中执行。

Answer 4

在父视图中设置：

justifycontent:center

在子集中：

alignself:center