如何使用导航事件重新加载反应原生

Question

我有 homeScreen ，这个屏幕有 useEffect 和数据过滤。 主屏幕到配置文件屏幕和配置文件屏幕中的数据更新并返回主屏幕。 此更新的数据需要显示在主屏幕中。 我想知道导航事件焦点可以重新加载这个主屏幕吗？ 怎么会这样

 useEffect(()=>{

     let unsub;

     const fetchCard = async ()=>{
            
      // // user
           const uRef = query(doc(db,'users',user.uid))
           const udata = await getDoc(uRef)
          .then((snapshot)=>snapshot.data())

      //     console.log(udata.age)
         
      // //users

      //     const usRef = query(collection(db,'users'))
      //     const usdata =await getDocs(usRef)
      //     .then((snapshot)=>snapshot.docs.map(doc=>({
      //       id:doc.id,
      //       ...doc.data()
      //     })))

      //     console.log(usdata[0].age)


      const swipeRef = collection(db,'users',user.uid,'swipes')
      const myswipeid = await getDocs(swipeRef)
      .then((snapshot)=>snapshot.docs.map(doc=>doc.id))
      
     
      const swipeuserId = myswipeid.length>0?myswipeid :['test'];
     
 
  
      unsub = onSnapshot(query(collection(db,'users'),where('gender','==',udata.interestIn),where("id","not-in",[...swipeuserId])),
            snapshot=>{
                    setProfiles(
                      snapshot.docs
                     
                      .map(doc=>({
                        id :doc.id,
                        ...doc.data()
                      })
                     
                     )
                    )
                  }
      )
     }
     fetchCard()
     return unsub
  },[setProfiles])
   

如何通过向后导航重新加载此 useEffect。 谁能给我看看例子

Answer 1

如果您使用 react 原生导航，请使用 useFocusEffect https://reactnavigation.org/docs/function-after-focusing-screen/ 当你回到屏幕时这个钩子调用（当当前屏幕可见或聚焦时）

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(()=>{

 let unsub;

 const fetchCard = async ()=>{
        
  // // user
       const uRef = query(doc(db,'users',user.uid))
       const udata = await getDoc(uRef)
      .then((snapshot)=>snapshot.data())

  //     console.log(udata.age)
     
  // //users

  //     const usRef = query(collection(db,'users'))
  //     const usdata =await getDocs(usRef)
  //     .then((snapshot)=>snapshot.docs.map(doc=>({
  //       id:doc.id,
  //       ...doc.data()
  //     })))

  //     console.log(usdata[0].age)


  const swipeRef = collection(db,'users',user.uid,'swipes')
  const myswipeid = await getDocs(swipeRef)
  .then((snapshot)=>snapshot.docs.map(doc=>doc.id))
  
 
  const swipeuserId = myswipeid.length>0?myswipeid :['test'];
 


  unsub = onSnapshot(query(collection(db,'users'),where('gender','==',udata.interestIn),where("id","not-in",[...swipeuserId])),
        snapshot=>{
                setProfiles(
                  snapshot.docs
                 
                  .map(doc=>({
                    id :doc.id,
                    ...doc.data()
                  })
                 
                 )
                )
              }
  )
 }
 fetchCard()
 return unsub

},[])