イメージ 'contains' resizeModeは反応ネイティブでは機能しません

Question

私は実際のAndroidデバイスでReact Nativeを使用しています。 だけでメインのアプリのコンポーネントに機能をレンダリング以下で本当にシンプルなアプリ...私は私のデバイス上で次のような結果を得る

render() { 
    <Image 
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}} 
    style={ 
     { 
     flex: 1, 
     resizeMode: 'contain', 
     backgroundColor: 'yellow' 
     }   
    } /> 
} 

作成する場合：あなたは全体の背景を見ることができるように

を黄色ですので、イメージ要素が実際に画面全体のサイズを占めていることがわかります。しかし、それは間違ってレンダリングされます。 'cover' resizeModeは期待どおりに動作します（「ストレッチ」モードも同様です）。 これは動作していない '包含'モードです（私の視点から見て最も重要なモードです）。 画像が表示されないので、画像をListViewに配置すると、さらに悪化します。

UPDATE 1 フレデリックは指摘しているように、「含有」は画像がコンテナのサイズよりも大きい場合にのみ機能します。では、アスペクト比を維持したまま、イメージ全体をコンテナサイズにするにはどうしたらいいですか？ Reactのスタイルではまだパーセントはサポートされていません。イメージがロードされたら、イメージの幅と高さのプロパティを取得する方法はわかりません。 Imageコンポーネントに関連付けられたイベントは、その情報を提供しません。

更新2 いいニュースです。私は現在、React Native v0.24.1を使用しています。実際のイメージサイズがコンテナよりも小さい場合でも、イメージ 'contain'モードが期待通りに機能するようです。 zvonaの解決策は良いです（ただし、onLayoutは画像の表示サイズを指定しますが、実際の画像サイズは表示されません）。現時点では、実際のイメージサイズを調べる方法はわかりません（ネットワークリソースからイメージを取得しているとしましょう。サイズを知りません。計算したい場合は非常に重要です）アスペクト比）。

Answer 1

「含む」は、イメージサイズがより大きい場合にのみ、より大きくなります。この場合、コンテナはフルスクリーンです。 URLでロードしている画像は、わずか53×77ピクセルなので、それほど小さくありません。だからそれはサイズ変更されません。

「カバー」は、達成しようとしていることをすべきだと思います。しかし、イメージのサイズのために、それはそれがそう拡大されたとき、それはとても素敵に見えません。もしこれらのデバイス幅+高さに比例しなければならない

onImageLayout: function(data){ 
    console.log('layout', data.nativeEvent.layout); 
} 

、：

<Image source={{uri:'...'}} onLayout={this.onImageLayout} /> 

：質問のUPDATED一部にhttps://rnplay.org/apps/X5eMEw

Answer 2

私の答え：ここでは例メイド 取得先：

const { 
    Dimensions, 
    . 
    . 
    . 
} = React; 

const windowWidth = Dimensions.get('window').width; 
const windowHeight = Dimensions.get('window').height; 

そして、あなたがスタイルでのパーセンテージとして幅/高さを取得したい場合は、あなただけ例えば定義：

const styles = StyleSheet.create({ 
    image: { 
    width: windowWidth * 0.75, 
    height: windowHeight * 0.33 
    }   
}); 

Answer 3

これは、最新の反応ネイティブ0で私のために働いたものです。37：

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />