首页 文章

React Native：flexDirection行内flexDirection列内的图像

提问于
浏览 次
0

我正在尝试将图像放在具有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上运行它 .

ios image reactjs react-native

2 回答

  • 0

    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;
    回复于
  • 0

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

    回复于

相关问题