Javascript 使用图像填充图案绘制视图

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

getRow=（）=>{
返回(
{this.images.map（函数（img，i）{return img；}）}
)
}

我怎么能想象，我需要一个二维数组。我知道我需要多少行。因此，我提出了以下建议：

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

prepareTable=（）=>{
设arr=[]
for（设i=0；i

当我要渲染它们时：

render() {

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

render（）{
设arr=prepareTable（）
返回(
{arr.map（（行，i）=>{return row}）}
)
}

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

---

我认为最简单、最好的方法就是使用flexWrap的单一视图，将所有图像存储在一个数组中，使用flexWrap在视图中调用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',
    },
}

render（）{
返回(
{imagesArray.map（（图像，索引）=>this.renderImage（图像，索引））}
);
}
渲染图像=（图像，索引）=>{
返回(
[！[希望有帮助，您可以这样显示图像。][1][1]
);
}
常量样式={
gridView：{
填充垂直：10，
marginHorizontal:20，
flexDirection:'行'，
flexWrap:“wrap”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
}

我认为最简单、最好的方法就是使用flexWrap的单一视图，将所有图像存储在一个数组中，使用flexWrap在视图中调用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',
    },
}

render（）{
返回(
{imagesArray.map（（图像，索引）=>this.renderImage（图像，索引））}
);
}
渲染图像=（图像，索引）=>{
返回(
[！[希望有帮助，您可以这样显示图像。][1][1]
);
}
常量样式={
gridView：{
填充垂直：10，
marginHorizontal:20，
flexDirection:'行'，
flexWrap:“wrap”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
}

现在有几个未知因素：

---

• 这张图片里面是什么

• this.drawRow

  做什么

因此，在这个答案中，有两个假设：

• this.images

  是一个包含N个元素的图像组件数组，如：

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

  在这里，您可以找到我创建的

  ---

  希望这能有所帮助。
  现在有几个未知因素：

  ---

  • 这张图片里面是什么

  • this.drawRow

    做什么
  因此，在这个答案中，有两个假设：

  • this.images

    是一个包含N个元素的图像组件数组，如：

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

    在这里，您可以找到我创建的

    ---

    希望这有帮助。
    这张图片里面有什么？还有什么是

    这个。绘图行

    do？这张图片里面是什么？还有什么是

    这个。绘图行

    do？

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