发表图片布局（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,
    }

　　

转载于:https://www.cnblogs.com/sunny-pei666/p/7399723.html