React Native使用FlatList渲染列表

最新推荐文章于 2024-05-29 09:39:10 发布

marsur

最新推荐文章于 2024-05-29 09:39:10 发布

阅读量898

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/marsur/article/details/103677100

版权

React 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在React Native中使用FlatList组件来渲染列表，详细讲解了引入组件、编写列表组件的步骤，并提供了注意事项，强调了FlatList需设置keyExtractor属性以避免警告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入FlatList组件

import { FlatList } from 'react-native';

2.编写列表组件

class DeviceList extends Component {
	//转换时间戳
	getTime = (timeStamp) => {
		var date=new Date(parseInt(timeStamp)* 1000);
		var year=date.getFullYear();
		var mon = date.getMonth()+1;
		var day = date.getDate();
		var hours = date.getHours();
		var minu = date.getMinutes();
		var sec = date.getSeconds();

		return mon+'-'+day;
	}
	render() {
		return (
			<FlatList
				data={this.props.deviceList}
				keyExtractor={(item, index) => index.toString()}
				renderItem={({item,index}) => {
					return (
						<View style= {{paddingLeft: 20,paddingRight: 20,paddingTop:15,paddingBottom: 15,borderBottomColor: "#ddd",borderBottomWidth: 1}}>
							<View style={{flexDirection: "row", justifyContent: "space-between"}}>
								<Text style={{color:"#666"}}>{item.thingName}</Text>
								<Text style={{color:"#666"}}>{this.getTime(item.statusUpdateTime)}</Text>
							</View>
							<View style={{flexDirection: "row", justifyContent: "space-around", marginTop: 10}}>
								<View style={{alignItems: "center"}}>
									<Text style={{color: "#4C84B7", fontSize: 18}}>Low</Text>
									<Text style={styles.ioConfig}>DI_0</Text>
									<Switch/>
									<Text style={styles.ioConfig}>DI_1</Text>
								</View>
								<View style={{alignItems: "center"}}>
									<Text style={{color: "#4C84B7", fontSize: 18}}>Low</Text>
									<Text style={styles.ioConfig}>DO_0</Text>
									<Switch/>
									<Text style={styles.ioConfig}>DO_1</Text>
								</View>
							</View>
						</View>)
				}}
			/>
		);
	}
}