用图像模式绘制视图 [英] Draw a view with image pattern

问题描述

我想用图像模式渲染视图，如下图所示.首先，我将所需数量的项目推送到数组中，然后调用返回视图(行)的方法.

I want to render the view with images pattern as a picture below. At first, I push a needed amount of items in an array and then I called the method that returned me a view(row).

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

我怎么能想象，我需要一个二维数组.我知道我需要多少行.所以，我做了这个:

How I can imagine, I need a two-dimensional array. I know how many rows I need. So, I have made this:

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

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

But it doesn't work. Where is my mistake

推荐答案

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

I think the easy and best way is just use a single View with flexWrap, store your all images in an array call the map function inside your View with flexWrap.

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

这篇关于用图像模式绘制视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！