Ios 反应本机：flexDirection行内flexDirection列内的图像

我试图把一个图像放在一个具有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>

24/06/2017

此部分用于模拟内容的视图

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

我正在iOS上运行它。

还可以添加尺寸标注，如下所示

var {
  Dimensions

} = React;

尝试以下方法，您需要设置图像的高度和宽度：

<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>

而不是静态给定的高度和宽度。 您现在可以根据您的要求提供高度和宽度

我希望你能理解

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

---

尝试取出

。我认为此空视图与

flex='row'

位于同一行，并阻止您的文本在屏幕上延伸。

我不熟悉手机上的flex，但是你试过让flex数字在图像和文本上匹配吗？如果我把flex 1放在图像上，结果是一样的。唯一能得到我想要的结果的方法是将flexDirection:“column”更改为flexDirection:“row”，图像适合视图，但这样做我不能将文本放在图像的底部。是的，这是可行的，但我希望图像大小适合视图大小，因此图像应根据手机屏幕大小进行更改。我可以获得view.width大小，并进行一些数学运算，使图像保持在我想要的大小，但我认为这不是正确的方法。您好brenoxp，我更新了我的答案。希望这对您有所帮助。：）实际上，我只是创建一个空组件来模拟右边内容的大小。我的问题是图像的大小太过适合它的内部视图。

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