如何使用导航事件在react native中重新加载

Question

我有homeScreen，这个屏幕有useEffect和数据过滤。HomeScreen可在配置文件屏幕中进行配置文件屏幕和数据更新，然后返回主屏幕。这些更新的数据需要显示在主屏幕上。我想知道的是，导航事件焦点可以重新加载这个主屏幕吗？如何制作这个

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本机导航，则使用useFocusEffecthttps://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

}，[](