首页 > 其他 > 详细

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

时间:2017-08-20 14:01:26      阅读:244      评论:0      收藏:0      [点我收藏+]
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张)

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!