RN 动态渲染列表
列表 动态 渲染 Rn
2023-09-27 14:22:20 时间
写在组件中
想要图片出来还应该给图片宽高哈!!
alignItems: 'center', //水平居中
动态渲染列表 返回的是一个数组
网络图片的渲染方式
<Image
source={{uri: data1.list[i].icon}}
style={styles.boximg}>
本地图片渲染方式有不同哈
import React, {Component} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
var data1 = require('./data1.json');
export default class demo2 extends Component {
render() {
return (
<View>
{/* 直接调用 */}
<View>
<Text style={styles.mytitle}>我是标题</Text>
<View style={styles.imgMaxbox}>{this.getNum()}</View>
</View>
</View>
);
}
getNum() {
var allcomData = [];
for (let i = 0; i < data1.list.length; i++) {
allcomData.push(
<View key={i} style={styles.boxmodule}>
<Image
source={{uri: data1.list[i].icon}}
style={styles.boximg}></Image>
<Text>{data1.list[i].word_type}</Text>
</View>,
);
}
return allcomData;
}
}
// 想要图片出来还应该给图片宽高哈!!
const styles = StyleSheet.create({
mytitle: {
fontSize: 18,
color: 'pink',
marginTop: 10,
},
imgMaxbox: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
},
boxmodule: {
borderWidth: 1,
borderColor: '#00ff00',
margin: 10,
padding: 3,
alignItems: 'center', //水平居中
},
boximg: {
width: 90,
height: 90,
},
});
相关文章
- redis源码(一):为redis添加自己的列表类型
- deepin常用软件列表
- 41.(后端)获取用户列表
- 项目列表
- Vue 简单实例 地址选配6 - 确认地址 - 地址列表渲染
- python列表中的值转换为字符串,及列表(数组)里的所有值拼接成一个字符串 的方法(含字符变成数组的方法)
- Odoo 动态设置树形视图列表中的字段
- Python 列表排序方法reverse、sort、sorted操作方法
- common lisp 一个判断列表是否只有一个对象的函数
- where EXISTS (子查询)多对多中通过中间表查对方列表
- ListView 展示 文本列表数据(含案例)
- MFC-CImagelist图像列表控件
- C语言实现一个列表式的学生信息管理系统(完善)