#javascript #listview #firebase #react-native #firebase-realtime-database
#javascript #listview #firebase #react-native #firebase-база данных в реальном времени
Вопрос:
У меня есть listview, который обновляется из моей Firebase в моем приложении React Native. Я наткнулся на несколько руководств о том, как люди ищут listview с помощью функции выборки, но ничего для Firebase.
У меня есть строка поиска в заголовке моего listview, как я могу выполнить поиск по ключевому слову и отфильтровать результаты с помощью Firebase?
Я следовал руководству на веб-сайте Firebase, чтобы настроить свой listview и источник данных. Я хочу иметь возможность поиска по ключевому слову в каждом из этих полей
listenForItems(itemsRef) {
itemsRef.on('value', (snap) => {
var items = [];
snap.forEach((child) => {
items.push({
title: child.val().title,
category: child.val().category,
description: child.val().description,
});
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(items)
});
});
}
Ответ №1:
Я, наконец, понял это. Этот код выполняет поиск на основе определенного имени элемента.
База данных
{
"directory" : {
"macintosh" : {
"address" : "117 East 11th Street, Hays, KS 67601",
"firstLetter" : "m",
"title" : "Macintosh",
},
"apple" : {
"address" : "117 East 11th Street, Hays, KS 67601",
"firstLetter" : "a",
"title" : "apple",
},
},
ListView с панелью поиска
render() {
return (
<View style={styles.container}>
<ScrollView>
<SearchBar
returnKeyType='search'
lightTheme
placeholder='Search...'
onChangeText={(text) => this.setState({searchText:text})}
onSubmitEditing={() => this.firstSearch()}
/>
{
this.state.loading amp;amp;
<ActivityIndicator
size="large"
color="#3498db"
style={styles.activityStyle}
/>
}
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderItem.bind(this)}
enableEmptySections={true}
/>
</ScrollView>
</View>
);
}
Функция поиска
firstSearch() {
this.searchDirectory(this.itemsRef);
}
searchDirectory(itemsRef) {
var searchText = this.state.searchText.toString();
if (searchText == ""){
this.listenForItems(itemsRef);
}else{
itemsRef.orderByChild("searchable").startAt(searchText).endAt(searchText).on('value', (snap) => {
items = [];
snap.forEach((child) => {
items.push({
address: child.val().address,
firstLetter: child.val().firstLetter,
title: child.val().title,
});
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(items)
});
});
}
}
Это выполняет поиск в базе данных firebase путем замены источника данных listview с помощью функции firebase orderbychild.startat().endat() . Это самая близкая вещь к функциям поиска sql «SELECT * BY%LIKE%».
Я также изменил свой код для поиска по первой букве. Таким образом, если кто-то ищет «Macbuk», он все равно покажет результат «Macbook». Он выполняет поиск только в M. Я добавил еще одно поле в своей базе данных к первой букве заголовка для поиска и сделал его строчным.