在导航到同一屏幕时未调用EXPO useEffect

Question

我有一个在流中第一次渲染时调用useEffect的屏幕。当我第二次在流中导航到屏幕时，use Effect没有被调用，但是我想在第一次调用渲染函数之前，之后或期间调用一个函数，当我们第二次导航到同一个屏幕时。

这是每次从不同屏幕导航到这个屏幕时的导航调用

navigation.navigate("x", { u:type, s:title});

下面是我的屏幕结构。我没有使用组件，而是使用导航函数

const x = ({ navigation}) => {
...
return (
<View style={styles.a}>
...    
</View>
);
};
export default x;

Answer 1

这里的问题是屏幕remains mounted in react-native在初始导航之后。因此，具有空依赖数组的useEffect将不会在随后的导航中被调用。

请注意，此行为与web不同。

如果你要从web后台进行反应导航，你可以假设当用户从路由a导航到路由B时，a会卸载(调用它的组件willunmount)，当用户回到它时，a会再次挂载。虽然这些React生命周期方法仍然有效，并且在React -navigation中使用，但它们的用法与web不同。

此处描述了解决此问题的推荐方法。对于你的情况，可以这样解决:

import { useFocusEffect } from '@react-navigation/native';
const x = ({ navigation}) => {

useFocusEffect(
React.useCallback(() => {
// called when screen is focused, thus everytime on navigation
return () => {
// unfocus... cleanup ... or whatever
};
}, [])
);
...
return (
<View style={styles.a}>
...    
</View>
);
};
export default x;

Answer 2

useEffect将在您的功能组件的第一次加载或某些依赖项将被更改时被调用。一切都保持不变，所以你的useEffect将无法工作。考虑使用react-navigationlib中的useFocusEffect。