相关疑难解决方法(0)

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

背景

我在屏幕上放置了一个图像,用于显示屏幕加载其他内容的时间.

我希望将图像居中,使其始终以所有设备为中心.

问题

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

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

例,

我目前的代码,

在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;
Run Code Online (Sandbox Code Playgroud)

jsx react-native

4
推荐指数
4
解决办法
3万
查看次数

标签 统计

jsx ×1

react-native ×1