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上运行它。

Answer 1

This View Screenshot

另外添加尺寸如下所示

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>

下面是代码为您提供移动布局的宽度，现在根据移动设备宽度更改宽度和高度 例如：

width : deviceWidth/3,
height : deviceHeight/3

代替静态给定的高度和宽度。 你可以根据你的要求给出高度和宽度。

我希望你明白。

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

Answer 2

尝试取出<View style={{flex: 2}}/>。我认为这个空视图与flex='row'在同一行，并阻止您的文本在屏幕上扩展。