sunny-pei666

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

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

  

分类:

技术点:

相关文章:

  • 2021-07-14
  • 2022-12-23
  • 2021-06-04
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-03-27
  • 2021-12-02
猜你喜欢
  • 2021-05-06
  • 2021-07-19
  • 2021-06-16
  • 2022-12-23
  • 2022-12-23
  • 2022-01-15
  • 2022-02-07
相关资源
相似解决方案