センターイメージ画像は、私は、画面上に置かれた画像は、他のコンテンツと、画面の負荷を示すためのものしている

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

ビューコンテナは高さが、それはこのように垂直方向と水平方向の両方に整列なる画像を作成すると、ページ全体にまたがる確認します

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

ようなスタイリングを持つ必要があります。

画像のサイズは、幅と高さを明確に定義するのではなく、パーセンテージを使用してトリックを行うと思います。

Answer 2

justifyContent and alignItems​​`には<View>のスタイルを設定する必要があります。

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を追加する必要があります。

は、このようにする必要があります。