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

Question

我是反应原生的新手，不知道如何正确循环二维数组。目前我在创建可以从数组中获取数据的简单 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
                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 通过rederItem 方法属性显示您的视图并设置numColumns={2}。