当我使用Stack导航时,组件会“刷新”,它会正确执行useEffect动作;如果使用Drawer导航,它只会更新一次,则离开一个屏幕,然后进入另一个屏幕,然后返回第一个屏幕, useEffect不会再次执行,如果Stack导航可以完美执行。有人可以指导我吗?
我不会说英语,对不起我的写作
答案 0 :(得分:1)
这是因为您需要在带有“ focus”事件的效果挂钩中使用navigation.addListener
订阅才能收听。
https://reactnavigation.org/docs/navigation-events/#navigationaddlistener
这是一个App.js独立演示(从一个空白的expo init项目开始):
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Feed" component={Feed} />
<Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>
);
}
function Feed({ navigation }) {
React.useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
// do something
console.log("feed is focused");
});
return unsubscribe;
}, [navigation]);
return (
<View style={styles.container}>
<Text>Feed</Text>
</View>
);
}
function Article({ navigation }) {
React.useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
// do something
console.log("article is focused");
});
return unsubscribe;
}, [navigation]);
return (
<View style={styles.container}>
<Text>Article</Text>
</View>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});