如何使用React Native中的过滤数据生成多个平面列表
问题描述:
如何创建仅显示具有一种“状态”类型的数据的多个平面列表?如何使用React Native中的过滤数据生成多个平面列表
例如:
- 一个Flatlist用于状态=== 'INPROGRESS'
- 一个Flatlist用于状态=== '完成'
- 一个Flatlist用于状态=== “无法'
所有数据都在数组'goallist'中,该数组来自Firebase数据库。
我真的很感谢你对此的帮助。
import React, { Component } from 'react';
import { Text, FlatList, View, Image, TouchableOpacity, Alert } from 'react-native';
import firebase from 'firebase';
import { Button, Card, CardSection } from '../common';
import styles from '../Styles';
class List extends Component {
static navigationOptions = {
title: 'List',
}
constructor(props) {
super(props);
this.state = {
goallist: '',
loading: false,
};
}
componentDidMount() {
this.setState({ loading: true });
const { currentUser } = firebase.auth();
const keyParent = firebase.database().ref(`/users/${currentUser.uid}/goalProfile`);
keyParent.on(('child_added'), snapshot => {
const newChild = {
key: snapshot.key,
goal: snapshot.val().goal,
status: snapshot.val().status
};
this.setState((prevState) => ({ goallist: [...prevState.goallist, newChild] }));
console.log(this.state.goallist);
});
this.setState({ loading: false });
}
onRenderItem = ({ item }) => (
<TouchableOpacity onPress={this.showAlert}>
<Text style={styles.listStyle}>
{ item.goal } { item.key }
</Text>
</TouchableOpacity>
);
showAlert =() => {
Alert.alert(
'Did you succeed or fail?',
'Update your status',
[
{ text: 'Completed?',
onPress:() => console.log('Completed Pressed'), },
{ text: 'Failed?',
onPress:() => console.log('Failed Pressed'),
},
{ text: 'Cancel',
onPress:() => console.log('Cancel Pressed'),
style: 'cancel' },
],
{ cancelable: false }
);
}
keyExtractor = (item) => item.key;
render() {
return (
<Card>
<View style={{ flex: 1 }}>
<FlatList
data={this.state.goallist}
keyExtractor={this.keyExtractor}
extraData={this.state}
renderItem={this.onRenderItem}
/>
</View>
</Card>
);
}
}
export { List };
答
你只需要修改onRenderItem
功能如下使一些特定的对象(这Flatlist
只显示INPROGRESS对象):
onRenderItem = ({ item }) => {
if (item.type === 'inProgress') {
return (
<TouchableOpacity onPress={this.showAlert}>
<Text style={styles.listStyle}>
{ item.goal } { item.key }
</Text>
</TouchableOpacity>
)
} else { return null; }
};
谢谢。你的解决方案回答了我的问题并且工作。没有代码的“else return null”部分,我能够做到这一点。 – courti