React Native 中的二维数组循环视图

Posted 2023-02-21

【中文标题】React Native 中的二维数组循环视图

【英文标题】：2 Dimensional Array Loop View in React Native

【发布时间】：2018-07-19 05:36:49

【问题描述】：

我是反应原生的新手，不知道如何正确循环二维数组。目前我在创建可以从数组中获取数据的简单 flexbox 布局循环时遇到问题。

这是我的图片。 Flexbox Layout

我的第一个循环是循环 8 个数据的 FlexDirection Row，第二个循环是循环 2 个数据的列。

问题是我无法获取所有数据，因为主视图位于第二个循环上，只有 8 个数据中的 2 个。

这是我的数据和渲染函数代码。

var menuHome= [
  menuName:'menu1',menuImage:'image1',
  menuName:'menu2',menuImage:'image2',
  menuName:'menu3',menuImage:'image3',
  menuName:'menu4',menuImage:'image4',
  menuName:'menu5',menuImage:'image5',
  menuName:'menu6',menuImage:'image6',
  menuName:'menu7',menuImage:'image7',
  menuName:'menu8',menuImage:'iamge8'
]
  render() 
      for(i=1;i<=2;i++)

        if(i%2 !== 0) 
          menuBox2 = 15;
        else
          menuBox2 = 0; 
          l+=1;
        

        menuBlock2.push(
          <TouchableHighlight 
            style=[styles.menuBox, marginRight:menuBox2,backgroundColor:this.state.menuBg]
            onPress=  () =>  
            underlayColor="rgba(138,24,27,1)"
            key = i
            >
            <View style=[styles.justify]>
              <SvgUri
                
                
                source=require("AwesomeProject/app/images/balance-01.svg")
                style=styles.images
              />
              <Text style=[styles.baseText,color:this.state.menuText]>menuHome[i].menuName</Text>
            </View>
          </TouchableHighlight>
        )
      

    for(z=0;z<4;z++)
      menuBlock.push(
        <View style=[styles.mainWrapper, styles.row] key = z>
          menuBlock2
        </View>
      )
    

    return (
      <View style=styles.mainView>
        menuBlock
      </View>
    );
  

谢谢你们！

【问题讨论】：

你有i <=2 ，它只会推送menuHome数组中的前3个元素？

@MattyK14 是的，这是专栏。如您所见，第一个循环是循环“MenuBlock2”的“MenuBlock”。 “MenuBlock”用于 flexDirection:row，“MenuBlock2”用于列。

我怎样才能得到所有的数组数据？

我不完全确定您要做什么，但是您将元素推入一个数组，然后将这些完全相同的元素推入另一个数组。

根据您提供的图片，您希望将哪些元素定位在哪里？

【参考方案1】：

您也可以简单地使用FlatList 通过rederItem 方法属性显示您的视图并设置numColumns=2。