您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页react-native json文件的加载和数据的展示

react-native json文件的加载和数据的展示

来源:伴沃教育

显示的效果如下图:

效果图

步骤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

 运行。。。。。。

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务