在 React Native 中使用 Firebase Firestore 建構動態產品篩選器元件

摘要

在這篇文章中，我們將探討如何在 React Native 中利用 Firebase Firestore 建構一個動態的產品篩選器元件，這對於提升用戶體驗至關重要。 歸納要點:

• 利用 Firebase Firestore 的即時更新機制,搭配 `onSnapshot` 方法,讓產品篩選結果能隨著使用者的調整即時反應,提高使用者體驗。
• 透過 Firestore 的 `where` 查詢條件及 `orderBy` 和 `limit` 功能,將篩選邏輯轉移到資料庫端,有效減少前端運算與資料傳輸,提升效能。
• 結合 GraphQL 提供靈活的查詢接口,使複雜篩選條件更易管理,同時探索第三方套件如 `react-native-elements` 和 `react-native-firestore` 簡化開發流程。

npm install @react-native-firebase/app @react-native-firebase/firestore

import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore';  const firebaseConfig = {   apiKey: "YOUR_API_KEY",   authDomain: "YOUR_PROJECT_ID.firebaseapp.com",   projectId: "YOUR_PROJECT_ID",   storageBucket: "YOUR_PROJECT_ID.appspot.com",   messagingSenderId: "YOUR_MESSAGING_SENDER_ID",   appId: "YOUR_APP_ID", };  const app = initializeApp(firebaseConfig); const db = getFirestore(app);  export { db };

import React, { useState, useEffect } from 'react'; import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; import { collection, query, getDocs, where } from 'firebase/firestore'; import { db } from '../config/config';  const CheckBox = ({ products, updateProducts }) => {   const [brandCheckboxes, setBrandCheckboxes] = useState({});   const [isLoading, setIsLoading] = useState(true);    // Fetch brands from Firestore   useEffect(() => {     const fetchBrands = async () => {       const querySnapshot = await getDocs(collection(db, 'Product_details'));       const brandsSet = new Set();        querySnapshot.forEach((doc) => {         const productName = doc.data().Product_Name;         if (productName) {           const firstWord = productName.split(' ')[0];           brandsSet.add(firstWord);         }       });        const dynamicCheckboxes = {};       brandsSet.forEach((brand) => {         dynamicCheckboxes[brand] = false; // Initialize each brand with unchecked state       });       dynamicCheckboxes['Others'] = false; // Add "Others" option        setBrandCheckboxes(dynamicCheckboxes);       setIsLoading(false);     };      fetchBrands();   }, []);    // Handle filtering based on selected checkboxes   const handleSearch = async (selectedBrands) => {     const productRef = collection(db, 'Product_details');     const brandQueries = Object.keys(selectedBrands).map((brandName) => {       if (selectedBrands[brandName]) {         return query(productRef, where('Product_Name', '>=', brandName), where('Product_Name', '<', brandName + '\uf8ff'));       }       return null;     });      const queryPromises = brandQueries.filter((query) => query !== null).map((q) => getDocs(q));     const querySnapshots = await Promise.all(queryPromises);     const results = [];      querySnapshots.forEach((snapshot) => {       snapshot.forEach((doc) => {         results.push(doc.data());       });     });      updateProducts(results); // Update the products based on filtered results   };    // Handle checkbox state change   const handleCheckboxChange = (brandName) => {     setBrandCheckboxes((prevCheckboxes) => ({       ...prevCheckboxes,       [brandName]: !prevCheckboxes[brandName],     }));      const selectedBrands = { ...brandCheckboxes };     selectedBrands[brandName] = !selectedBrands[brandName];     handleSearch(selectedBrands); // Trigger search on checkbox toggle   };    if (isLoading) {     return (                Loading brands...            );   }    return (            Filters       {Object.keys(brandCheckboxes).map((brandName) => (          handleCheckboxChange(brandName)}           style={styles.checkbox}         >                                   {brandName}                           ))}        ); };  const styles = StyleSheet.create({   loadingContainer: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',   },   checkBoxContainer: {     marginTop: 10,   },   filterHeading: {     fontSize: 10,     fontWeight: 'bold',     marginBottom: 5,   },   checkbox: {     flexDirection: 'row',     alignItems: 'center',     marginBottom: 10,   },   checkboxBox: {     width: 10,     height: 10,     borderWidth: 1,     borderColor: 'black',     marginRight: 5,   },   checkedBox: {     backgroundColor: 'black',   },   uncheckedLabel: {     fontSize: 8,   },   checkedLabel: {     fontSize: 8,     fontWeight: 'bold',   }, });  export default CheckBox;

使用 React Native 核取方塊篩選元件，結合 Firebase Firestore 進行動態產品篩選

使用 Firebase Firestore 和 GraphQL 建立動態產品過濾系統

npm install @react-native-firebase/app @react-native-firebase/firestore

import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore';

javascript

Copy code

import React, { useState, useEffect } from 'react'; import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; import { collection, query, getDocs, where } from 'firebase/firestore'; import { db } from '../config/config';

動態過濾產品：利用 Firebase Firestore 和 React Native 建立即時品牌篩選