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

Question

如何创建多个仅显示具有一种类型 'status' 的数据的平面列表？

例如：

• 一个 Flatlist 状态 === 'inProgress'
• 一个 Flatlist 状态 === 'Done'
• 一个 Flatlist 状态 === 'Failed'

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