Question

我想用图像模式渲染视图，如下图所示。首先，我在数组中推送所需数量的项目，然后调用返回视图（行）的方法。

getRow = () => {
        return(
            <View style={{flex:1,flexDirection:'row', justifyContent: "space-between"}}>
                { this.images.map(function(img,i) { return img; }) }
            </View>
        )
    }

我怎么能想象，我需要一个二维数组。我知道我需要多少行。所以，我已经做到了：

prepareTable = () => {
    let arr = []
    for (let i = 0; i < pattern.height.count; ++i) {
        arr.push((this.drawRow()))
    }
    return arr
}

当我想渲染它们时：

render() {

   let arr = prepareTable()
   return(
   <View style={{flex:1,flexDirection:'column', justifyContent: "space-between"}}>
       {arr.map((row,i)=>{return row})}
    </View>
   )
}

但它不起作用。我的错误在哪里

Answer 1

我认为简单而且最好的方法是使用一个带有flexWrap的View，将所有图像存储在一个数组中，使用flexWrap调用View中的map函数。

render(){
   return(
          <View style={styles.gridView}>
                    {imagesArray.map((image, index) => this.renderImage(image, index))}
          </View>);
}
renderImage=(image, index)=>{
    return (
            <Image .../>[![Hope it will help , you can show your images like this way.][1]][1]
        );
}

const styles = {
    gridView: {
        paddingVertical: 10,
        marginHorizontal: 20,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'center',
    },
}

Answer 2

现在有几个未知数：

this.images内的内容是什么？
this.drawRow做什么？

所以在这个答案中，有几个假设：

this.images是一个包含N个元素的Image组件数组，如：

[
 (<Image
    style={styles.image}
    source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
 />),
 (...)
]

如果我们稍微抽象一下逻辑，我们会得到如下内容：

    // `this.images` seems to be a little sturdy for now so instead we will
    // have an `imagesPerRow` method that takes in the number of
    // images that we want on each `row`
    imagesPerRow(number) {
      const img = [];
      for(let i = 0; i < number; i++) {
       img.push(
          <Image
            style={styles.image}
            source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
          />
        );
      }
      return img;
    }
    // the `getRow` method wrap the array of images inside a `View` element
    // Here number will be the number of images inside it
    getRow = (number) => {
      return (
      <View style={styles.row}>
        { this.imagesPerRow(number) }
      </View>
      );
    }

    // drawTable takes two parameters rowNum (amount of rows)and
    // columnNum (amount of columns), these will render the actual table
    drawTable(rowNum, columnNum) {
      const rows = []
      for(let i = 0; i < rowNum; i++) {
       rows.push(this.getRow(columnNum));
      }
      return rows;
    }

    // In the render method we just call the `drawTable` with the desired params
    render() {
      return (
        <View style={styles.container}>
          { this.drawTable(10, 4) }
        </View>
      );
    }

重要的是要记住造型，否则它看起来很局促

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'stretch',
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#222222',
      },
      image: {
        width: 50,
        height: 50

      },
      row: {
        flex:1,
        flexDirection:'row',
        justifyContent: 'space-around',
        alignItems: 'center'
      }
    });

在这里你可以找到我创建的working example。

希望这有帮助。

用图像模式绘制视图

2 个答案: