React Native中的2维阵列循环视图

Question

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

这是我的照片。柔性箱布局

我的第一个循环是针对FlexDirection Row，它循环8个数据，第二个循环是针对列，它循环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
                width="50"
                height="50"
                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>
    );
  }

谢谢你们！

Answer 1

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