リア・ネイティブのウェルカム・スクリーンが背景画像で混乱する

Question

何かの理由から、私は大きな背景を設定してモバイル・スクリーンに合わせようとしています。幅は100％になり、高さは動的になります。

また、私はより大きなロゴを持っていて、それを画面に収めたいので、幅を与えました&高さですが、見た目が切れています..私は間違っていますか？真ん中の背景とロゴを意味してちょうど

import React, { Component } from 'react'; 
 
import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; 
 

 
export default class Preload extends Component { 
 
    render() { 
 
    return (
 
     <View style={styles.mainBox}> 
 
      <Image source={require('../app_images/preload/bg.jpg')} style={styles.bgImage} /> 
 
      <View><Image source={require('../app_images/preload/logo.png')} style={styles.logoImage} /></View> 
 
     </View> 
 
    ); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    mainBox:{ 
 
     flex: 1, 
 
     alignItems:'center', 
 
     justifyContent:'center', 
 
     width: null, 
 
     height: null 
 
    },bgImage: { 
 
     position:'absolute', 
 
     top: 0, 
 
     left: 0, 
 
     alignSelf: 'stretch' 
 
    },logoImage: { 
 
     width: 100, 
 
     height: 150 
 
    } 
 
}); 
 

 
AppRegistry.registerComponent('Preload',() => Preload);

おかげで...素敵な「プリローダー」画面が欲しいです！

Answer 1

ロゴの場合は、contain resizeModeを使用してください。バックグラウンドモードの場合

logoImage: { 
     width: 100, 
     height: 150, 
     resizeMode: 'contain' 
} 

、私はあなたがcoverを使用して