中心图片阵营本地加载屏幕

背景中心图片阵营本地加载屏幕

我已经放在屏幕上的图像意在显示屏幕负载时等内容。

我想让图片居中，所以它始终位于所有设备的中心。

问题

目前图像显示出来顶部中心。我希望它也是垂直对齐的。另外要确保它在所有设备上始终保持一致。

问题

是什么，以确保解决方案的图像始终居中，右大小为所有设备？

实施例，

我当前的代码，

在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;

来源

2017-08-15 wuno

的View容器应当具有造型为

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

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

对于图像大小，我认为使用百分比将做的伎俩，而不是定义确定的宽度/高度。

来源

2017-08-15 02:19:27 justelouise

我明白了这一点，你认为这对所有设备都有好处吗？常量LoadingScreen =（）=>（ <查看风格= {} styles.container > <图像风格= {} styles.logo源 = {}标志 /> ）; const styles = StyleSheet。创建（{ 容器：{ 显示： '柔性'，挠曲：1， justifyContent： '中心'， alignItems： '中心'， }，标志：{ 宽度：220，高度：300 ， marginTop：-50, }， }）; – wuno

是。我认为它可以在任何设备上正常工作。 – justelouise

您需要设置<View>的样式为justifyContent and alignItems`。

应该是这样的：

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>，使其中心，但它仍然需要在<View>添加justifyContent使其垂直居中。

来源

2017-08-15 04:36:35

中心图片阵营本地加载屏幕

回答

相关问题