1. Apresente o componente FlatList
import { FlatList } from 'react-native';2. Escreva o componente da lista
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. Renderização
Precauções
O atributo keyExtractor={(item, index) => index.toString()} deve ser adicionado à tag FlatList , caso contrário, haverá um aviso de que o valor da chave não está definido