显示的效果如下图：
效果图
步骤1:将图片放入ios的图片管理文件夹中
图1
步骤2:创建一个json文件模拟数据
图3
步骤3:定义一个函数返回每个子组件
图4
代码如下
export default classRN3extendsComponent {
render() {
return(
{/*返回6个视图*/}
{this.renderAllHero()}
);
}
//返回所有的英雄
renderAllHero(){
//定义数组装所有的子组件
varallhero= [];
//遍历json数据
for(vari=0;i
//取出单独的数据对象
varhero=Datas.data[i];
//直接装入数组
allhero.push(
{hero.name}
);
}
//返回数组
returnallhero;
}
}
步骤4:计算好每个子控件的宽度和间距
图5
步骤5:设置显示的样式
图6
运行。。。。。。
