码迷,mamicode.com
首页 > 其他好文 > 详细

发表图片布局(1-9张)

时间:2017-08-20 14:06:19      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:flex   img   int   ima   super   highlight   row   ops   break   

constructor(props) {
    super(props)
    this.state = {
      ImageUri:[],
    }


//render方法里

render() {
    let ImageView=null;
    let ImageUri=this.state.ImageUri;
    let imgNum=ImageUri.length;
    console.log(ImageUri[0]);
    console.log(imgNum);
    switch (imgNum) {
      case 1:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            </View>
        </View>
      }break;
      case 2:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            </View>
        </View>
      }break;
      case 3:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
            </View>
        </View>
      }break;
      case 4:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
          </View>
        </View>
      }break;
      case 5:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
          </View>
        </View>
      }break;
      case 6:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[5]}}/>
          </View>
        </View>
      }break;
      case 7:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[5]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[6]}}/>
          </View>
        </View>
      }break;
      case 8:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[5]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[6]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[7]}}/>
          </View>
        </View>
      }break;
      case 9:{
        ImageView=
        <View style={styles.ImageView}>
          <View style={{flexDirection:‘row‘}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[0]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[1]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[2]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[3]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[4]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[5]}}/>
          </View>
          <View style={{flexDirection:‘row‘,marginTop:5}}>
            <Image
              style={styles.image1}
              source={{uri:ImageUri[6]}}/>
            <Image
              style={styles.image2}
              source={{uri:ImageUri[7]}}/>
              <Image
              style={styles.image2}
              source={{uri:ImageUri[8]}}/>
          </View>
        </View>
      }break;
    }


//样式布局
ImageView:{
      width:Dimensions.get(‘window‘).width-110,
      height:200,
      marginTop:10,
      marginLeft:5,
    },
    image1:{
      width:(Dimensions.get(‘window‘).width-110)/3,
      height:(Dimensions.get(‘window‘).width-110)/3,
    },
    image2:{
      width:(Dimensions.get(‘window‘).width-110)/3,
      height:(Dimensions.get(‘window‘).width-110)/3,
      marginLeft:5,
    }

  

发表图片布局(1-9张)

标签:flex   img   int   ima   super   highlight   row   ops   break   

原文地址:http://www.cnblogs.com/sunny-pei666/p/7399723.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!