イメージをビューにサイズ変更する - ネイティブに反応する

Question

ビュー内に収まるようにイメージのサイズを変更できるかどうかは疑問です。

これは私がヘッダビューに画像フィットを作りたい私が今持っているもの

<View style={styles.container}> 
    <View style={styles.header}> 
     <Image 
     source={headerImage}  
     /> 

    </View> 
    <Text style={styles.basicText}>text</Text> 
    </View> 

---

const styles = StyleSheet.create({ 
     container: { 
     flex: 1, 
     backgroundColor: "#fff" 
     }, 
     header: { 
     height: 200, 
     backgroundColor: 'red' 
     }, 
     background: { 
     width: null, 
     height: null 
     }, 
     image: { 

     } 

です。

Answer 1

フレックスを追加：画像に1を加えれば、コンテナ全体が伸びます。

image: { 
    flex: 1 
} 

Answer 2

スタイル下記てみ

<View style={styles.container}> 
    <View style={styles.header}> 
    <Image style={styles.image} 
     source={headerImage}  
    /> 

    </View> 
    <Text style={styles.basicText}>text</Text> 
</View> 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: "#fff" 
    }, 
    header: { 
    height: 200, 
    backgroundColor: 'red' 
    }, 
    background: { 
    width: null, 
    height: null 
    }, 
    image: { 
    width: 50, 
    height: 50 
    } 
}) 

がインクルードが

http://facebook.github.io/react-native/releases/0.42/docs/image.html#props

またはIMAでResizeModeですを使用してネイティブイメージプロパティを反応させる参照してくださいスタイルGeの小道具

Answer 3

Moti Azuの回答に加えて、resizeModeも設定する必要があります。

image: { 
    flex:1, 
    height: null, 
    resizeMode: 'contain', 
    width: null, 
} 

それが動作するようには思えない場合は、スタイルcontainerであなたのViewは幅を持っていることを確認してください。