フィルタリングされたデータを含む複数のフラットリストをネイティブで持つ方法

Question

'ステータス'の1つのタイプのデータのみを表示する複数のフラットリストを作成するにはどうすればよいですか？例えば

：ステータス=== のステータスのための

• 一つFlatlist === 'inProgressで'
• 一つFlatlistステータス=== ため
• 一つFlatlist '完了' は「失敗しました。 '

すべてのデータは、Firebaseデータベースの「goallist」という配列に格納されています。

本当にありがとうございます。

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

あなたは（これFlatlistのみinProgressでオブジェクトを示して）以下のようにいくつかの特定のオブジェクトをレンダリングするためにあなたのonRenderItem機能を変更する必要があります

onRenderItem = ({ item }) => { 
    if (item.type === 'inProgress') { 
    return (
     <TouchableOpacity onPress={this.showAlert}> 
     <Text style={styles.listStyle}> 
      { item.goal } { item.key } 
     </Text> 
     </TouchableOpacity> 
    ) 
    } else { return null; } 
};