中心圖片陣營本地加載屏幕

背景中心圖片陣營本地加載屏幕

我已經放在屏幕上的圖像意在顯示屏幕負載時等內容。

我想讓圖片居中，所以它始終位於所有設備的中心。

問題

目前圖像顯示出來頂部中心。我希望它也是垂直對齊的。另外要確保它在所有設備上始終保持一致。

問題

是什麼，以確保解決方案的圖像始終居中，右大小爲所有設備？

實施例，

我當前的代碼，

在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

中心圖片陣營本地加載屏幕

回答

相關問題