Я пытаюсь создать плоский список в реагировать на родной, где отображаются сообщения с их информацией и информацией их пользователя. Все эти данные хранятся в базе данных. Я вызываю эти данные в переменную состояния данных с помощью следующей функции:
getPosts = (limit = 20) => {
var list = [];
firebase.firestore()
.collection("posts").get().then((querySnapshot) => {
querySnapshot.forEach(async (doc) => {
var tempList = doc.data();
const usersQs = await firebase.firestore().collection("users").where('email', '==', doc.data().email).get();
usersQs.forEach(doc2 => {
Object.assign(tempList, {
"userName": doc2.data().name,
"avatar": doc2.data().avatar
});
});
list.push(tempList);
});
list.sort(function(a, b) {
var c = b.timestamp;
var d = a.timestamp;
return c - d;
});
this.setState({
data: list,
fullData: list
});
});
return new Promise((resolve, reject) => {
this.func;
resolve(_.take(this.state.fullData, limit));
});
};
Эта функция загружает правильные данные в состояние данных, но после того, как я пытаюсь загрузить эти данные в плоский список, который выглядит как this:
renderPost = post => {
return (
<View style={styles.feedItem}>
<Image source={post.avatar} style={styles.avatar} />
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<View>
<Text style={styles.name}>{post.userName}</Text>
<Text style={styles.timestamp}>{moment(post.timestamp).fromNow()}</Text>
</View>
<Ionicons name="ios-more" size={24} color="#73788B" />
</View>
<Text style={styles.post}>{post.text}</Text>
<Image source={post.image && {uri: post.image}} style={styles.postImage} resizeMode="cover" />
<View style={{ flexDirection: "row" }}>
<Ionicons name="ios-heart-empty" size={24} color="#73788B" style={{ marginRight: 16 }} />
<Ionicons name="ios-chatboxes" size={24} color="#73788B" />
</View>
</View>
</View>
);
};
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Feed</Text>
</View>
<FlatList
style={styles.feed}
data={this.state.data}
renderItem={({ item }) => this.renderPost(item)}
keyExtractor={item => item.timestamp.toString()}
showsVerticalScrollIndicator={false}
ListFooterComponent={this.renderFooter}
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh}
onEndReached={this.handleLoadMore}
onEndThreshold={100}
/>
</View>
Я вызываю функцию getPosts в следующем коде, который запускается при перезагрузке и refre sh:
componentDidMount() {
this.makeRemoteRequest();
}
...
makeRemoteRequest = _.debounce(() => {
this.setState({ loading: true });
this.getPosts(this.state.postNumLoad)
.then(posts => {
this.setState({
loading: false,
data: posts,
fullData: posts,
refreshing: false
});
})
.catch(error => {
this.setState({ error, loading: false, refreshing: false });
});
}, 250);
handleRefresh = () => {
this.setState({
refreshing: true
}, () => {
this.makeRemoteRequest();
});
};
handleLoadMore = () => {
this.setState({
postNumLoad: this.state.postNumLoad + 20
}, () => {
this.makeRemoteRequest();
});
};
Эти данные мигают после перезагрузки, но это не остается на экране последовательно. Когда я не перезагружаюсь, на экране ничего не появляется. Мое состояние выглядит следующим образом:
constructor(props) {
super(props);
this.state = {
data: [],
downloadImage: '../assets/images/temporaryProfilePicture.jpg',
loading: false,
error: null,
fullData: [],
refreshing: false,
postNumLoad: 20
};
}
Мой вопрос в целом таков: как сделать так, чтобы данные в плоском списке постоянно оставались на экране, не перезагружая и не перезагружая данные? Любая помощь будет в значительной степени оценена. Заранее спасибо!