Image resizeModeには他のスタイルのプロパティが必要です

Question

ImageにresizeModeがありますが、いくつかの行が必要な理由がわかりません。下の行に「//なぜ？」というコメントが表示されるのはなぜですか？ resizeModeの値を取得するために必要ですか？それらのいずれかを削除すると、それが壊れます。

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

const Images =() => 
    <View style={styles.container}> 
    <Image 
     source={require('./giraffes.jpg')} 
     style={styles.myImage}/> 
    </View>; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 // to fill screen 
    }, 
    myImage: { 
    flex: 1, // why? 
    resizeMode: 'contain', // can also use Image.resizeMode.contain 
    height: null, // why? 
    width: null // why? 
    } 
}); 

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

Answer 1

resizeModeが外容器に応じてサイズを変更するために使用されているため、あなたはflex: 1を必要としています。外側コンテナはの値が1であるため、flex:1をmyImageに置くと、外部コンテナ全体の1/1を塗りつぶしてほしいというメッセージが表示されます。 heightとのnullを使用すると、イメージのデフォルトの固定静的サイズが上書きされます。