设置来自Firebase的平面列表中的数据

时间:2018-11-21 09:20:19

标签: reactjs firebase react-native firebase-realtime-database react-native-flatlist

我是本机的新手,我已经通过firebase实现了推送通知。现在我只想在平面列表中设置数据,下面是我要显示数据的事件图像。我只想显示事件列表。消息下方。请帮助我设置一个只能设置其他元素的元素。这是我的代码。

    fetchFriendsList=(eventId)=>{
let allEventsList = [...this.state.allEventsList];
firebase.database().ref('/events').child(eventId).once
('value').then((snapshot) => {
let data = snapshot.val();
let items = Object.values(data);

allEventsList.push(items);
this.setState({allEventsList : allEventsList});
ToastAndroid.show("kk>"+allEventsList.length , 
ToastAndroid.SHORT);
}).then((data)=>{

}).catch((error)=>{
//error callback
console.log('error ' , error)
})   
}

//get event id from user events
deleteOldEvents=()=>{
let eventsList = [...this.state.userEventsList];

for(var i=0;i<eventsList.length;i++){
this.deleteFromFireBase(eventsList[i].eventId)
}
}

//app users remove that not in contacts
deleteFromFireBase=(eventId)=>{
let timeRemaining = 1;

firebase.database().ref('/events').child(eventId).once
('value').then((snapshot) => {
let data = snapshot.val();
let STime = data.sTime;  // start time
let eventDate = data.eventDate;

timeRemaining=this.remainingTimeInMin(STime,eventDate);
}).then((data)=>{
//remove from events
if(timeRemaining < 0){
this.setState({removeEventsList:[]});    



firebase.database().ref('/events').child(eventId).child('friends').once('value').then((snapshot) => {
let data = snapshot.val();
let items = Object.values(data);
this.setState({removeEventsList:items});    
}).then((data)=>{
//remove event data from users node
let removeEventsList = 
[...this.state.removeEventsList];

for(var i=0;i<removeEventsList.length;i++){
let getPhone= removeEventsList[i].phone

firebase.database().ref('/users').child(getPhone).child('/events').child(eventId).remove();
}
//remove whole event from event node

 firebase.database().ref('/events').child(eventId).remove();
 }).catch((error)=>{
 //error callback
 console.log('error ' , error)
 }) 
 }
 }).catch((error)=>{
//error callback
console.log('error ' , error)
})   
}

enter image description here

这是清单的代码

 <FlatList style={{}} keyboardShouldPersistTaps={'always'}
     data = {this.state.allEventsList}

     ItemSeparatorComponent={this.renderSeparator}
     renderItem = { ({item}) => {
     return(
     <TouchableOpacity onPress={() => this.goToNextScreen(item)}>
     <View style={{flexDirection:'row',paddingBottom:5,paddingTop:5, 
     justifyContent: 'space-between',alignItems: 'center'}}>

      <View style={{flexDirection:'column',justifyContent: 'flex-start'}}>
      <Text style={styles.itemText2CS}>
      <Text style={styles.baseText_titillium_web}>
       {item.groupName}</Text>
       </Text>
       </View>
      <View style={{justifyContent: 'flex-end' ,marginRight:10,textAlignVertical: "center",}}>
      <Image  source = {require("./images/arrow_right.png")} />
      </View>
      </View>
      </TouchableOpacity>
      )}}
       />
       </View>

1 个答案:

答案 0 :(得分:1)

我认为您的问题在这里:

let items = Object.values(data); // items is an array

allEventsList.push(items);// allEventsList is an array, with allEventsList [0] = items 
this.setState({allEventsList : allEventsList}); // this.state.allEventsList = [[items]]

所以您有一个数组数组。在FlatList中,将data设置为数组中的第一个元素,如下所示:

data = {this.state.allEventsList[0]}

让我知道它是否有效,或者您还有其他问题。