React Native：flexDirection行内のflexDirection列内のイメージ

Question

私はflexDirection列を持つビュー内にイメージを配置しようとしていますが、このビューはflexDirection行を持つ別のビュー内に配置しようとしています。これは私が望む結果である：

そして、これは私が得る結果である：

画像の幅が青いの幅と同じにする必要がありますテキスト。しかし、なぜイメージが内部のビューよりも大きいのか分かりません。ここに私のコードです：

<View> 
    <View style={{flex: 1, flexDirection: 'row'}}> 

     <View style={{flex: 1, flexDirection:'column', backgroundColor: 'blue'}}> 

     <Image 
      style={{flex: 3, backgroundColor: 'red'}} 
      source={require('../img/2.jpg')} 
      resizeMode={Image.resizeMode.contain} 
     /> 

     <Text style={{flex: 1}}>24/06/2017</Text> 

     </View> 

     <View style={{flex: 2}}/> 
    </View> 

    </View> 

この部分は、コンテンツのビューをシミュレートするために使用されます。

<View style={{flex: 2}}/> 

私はiOSで実行しています。

var { 
    Dimensions 

} = React; 

以下のように

Answer 1

This View Screenshot

また、あなたがイメージの高さと幅を設定する必要があり、このようにしてみてください外形寸法を追加します。

以下

<View> 
     <View style={{flexDirection: 'row', height:200 }}> 

      <View style={{ flexDirection:'column', backgroundColor: 'blue', height:100 , width: 100}}> 

      <Image 
       style={{ backgroundColor: 'red', height:100 , width: 100}} 
       source={require('./img/2.jpg')} 
       resizeMode={Image.resizeMode.contain} 
      /> 
      <Text style={{backgroundColor: 'blue'}}>24/06/2017</Text> 


      </View> 
     </View> 

     </View> 

は、コードがあなたに与えていますモバイルレイアウトの幅がモバイルデバイスの幅に応じて幅と高さを変更する 例：

width : deviceWidth/3, 
height : deviceHeight/3 

静的に与えられた高さと幅の代わりに。 あなたはあなたの要求に応じて身長と幅を与えることができます。

ご理解いただきますようお願い申し上げます。

var deviceWidth = Dimensions.get('window').width; 

Answer 2

<View style={{flex: 2}}/>をお試しください。この空のビューはflex='row'と同じ行にあり、テキストが画面全体に広がらないようにしています。