Я внедряю приложение в React-Native, где я выбираю "рестораны" в качестве документов из Cloud-Firestore, и я также использую слушатель onSnapshot (). Когда приложение будет готово к запуску, вероятно, будет около 3000 ресторанов. У меня есть несколько вопросов по этому вопросу.
-Мне нужно реализовать разбиение на страницы / отложенную загрузку для лучшего UX и меньших затрат, ИЛИ 3000 не большое значение, поэтому оно не сильно повлияет на производительность?!
-Если мне нужно реализовать один из них, какой мне следует реализовать?
-Если мне не нужно, то есть ли способ сжатьДанные JSON при загрузке в React-Native, чтобы сэкономить место? А затем распакуйте его по запросу пользователя.
Может ли пользователь выполнять поиск ресторана во время отложенной загрузки?
РЕДАКТИРОВАТЬ :Мне удалось реализовать ленивую загрузку, и она отлично работает, однако использование snapshot() слушателя сделает ленивую загрузку бессмысленной, но я должен использовать ее, потому что мне нужно получать в режиме реального времени новые «рестораны» или «заказы». еще я могу использовать вместо snapshot()? Или, может быть, есть способ использовать snapshot(), но с небольшим изменением кода?
Второй вопрос: смогу ли я решить вышеуказанную проблему? осуществить поиск ресторана? Кажется довольно хитрым, зная, что я использую ленивую загрузку.
componentDidMount() {
try {
// Cloud Firestore: Initial Query
this.retrieveData();
}
catch (error) {
console.log(error);
}
};
retrieveData = () => {
try {
this.setState({
loading: true
})
var initialQuery = firebase.firestore().collection('restaurants')
.orderBy('res_id')
.limit(this.state.limit)
//let documentSnapshots = await initialQuery.get();
initialQuery.onSnapshot((documentSnapshots => {
var All = documentSnapshots.docs.map(document => document.data());
var lastVisible = All[All.length - 1].res_id;
this.setState({
All: All,
lastVisible: lastVisible,
loading: false,
});
}));
}
catch (error) {
console.log(error);
}
};
retrieveMore = async () => {
try {
// Set State: Refreshing
this.setState({
refreshing: true,
});
// Cloud Firestore: Query (Additional Query)
var additionalQuery = await firebase.firestore().collection('restaurants')
.orderBy('res_id')
.startAfter(this.state.lastVisible)
.limit(this.state.limit)
// Cloud Firestore: Query Snapshot
var documentSnapshots = await additionalQuery.get();
// Cloud Firestore: Document Data
var All = documentSnapshots.docs.map(document => document.data());
// Cloud Firestore: Last Visible Document (Document ID To Start From For Proceeding Queries)
var lastVisible = All[All.length - 1].res_id;
// Set State
this.setState({
All: [...this.state.All, ...All],
lastVisible: lastVisible,
refreshing: false,
});
console.log('Retrieving additional Data', this.state.All);
}
catch (error) {
console.log(error);
}
};
// Render Header
renderHeader = () => {
try {
return (
<Text style={styles.headerText}>Items</Text>
)
}
catch (error) {
console.log(error);
}
};
// Render Footer
renderFooter = () => {
try {
// Check If Loading
if (this.state.loading) {
return (
<ActivityIndicator />
)
}
else {
return null;
}
}
catch (error) {
console.log(error);
}
};
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
// Data
data={this.state.All}
// Render Items
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<Text>(ID: {item.res_id}) {item.rest_name} {item.rest_location}</Text>
</View>
)}
// Item Key
keyExtractor={(item, index) => String(index)}
// Header (Title)
ListHeaderComponent={this.renderHeader}
// Footer (Activity Indicator)
ListFooterComponent={this.renderFooter}
// On End Reached (Takes a function)
onEndReached={this.retrieveMore}
// How Close To The End Of List Until Next Data Request Is Made
onEndReachedThreshold={0.1}
// Refreshing (Set To True When End Reached)
refreshing={this.state.refreshing}
/>
</SafeAreaView>
)
}