React Native使用FlatList渲染列表

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>)
				}}
			/>
		);
	}
}

3.效果图

注意事项

FlatList标签中必须加上keyExtractor={(item, index) => index.toString()}属性，否则会出现没有设置key值的警告