如何在 React Native 中拥有多个带有过滤数据的平面列表

Question

如何创建多个 Flatlists，只显示具有一种“状态”类型的数据？

例如：

• 状态 === 'inProgress' 的一个平面列表
• 一个状态列表 === “完成”
• 一个状态列表 === “失败”

所有数据都在数组“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 };

Answer 1

你只需要修改你的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; }
};