React导航6 -从一个堆栈A导航到堆栈屏幕B -为什么屏幕B不调用useEffect(但渲染)?

Question

我在堆栈导航器中嵌套了一个选项卡导航器

• 当我从选项卡屏幕A导航到堆栈屏幕B时，B的useEffect被调用，一切都很好。
• 当我从堆栈屏幕C导航到堆栈屏幕B时，B的useEffect没有被调用。我不明白为什么。-我能够从两个屏幕导航到屏幕B，这不是问题。我也能够传递参数。唯一的问题是当从C来的时候不会调用useEffect，从A来的效果很好。

我在两种情况下使用相同的

<Button title="goTo" onPress={() => props.navigation.navigate('SearchResults', {id: id})}/>

我还尝试使用useIsFocused和useFocusEffect，但当我从堆栈屏幕c导航时也不调用它。

编辑:似乎问题是导航到屏幕C(从我试图导航到屏幕B(不安装))，我在标签导航器的标题中定义了它。如果我不这样做，我可以导航到C, C就会安装。但我不明白为什么会这样，也不明白该怎么做。所以在我的代码:当我从NotificationsScreen导航到SearchResultsScreen, SearchScreen不会挂载(因为它似乎是因为我访问NotificationsScreen从标题标签导航器)

const MyTabs = (props) => {
return (
<Tab.Navigator
screenOptions={{
headerRight: (props) => (
<TouchableOpacity onPress={() => navigation.navigate("Notifications")}>
<Icon name="notifications"/>
</TouchableOpacity>
)
}}
>    
<Tab.Screen
name="Home"
component={HomeScreen}
/>  
<Tab.Screen 
// when I navigate from SearchScreen to SearchResultsScreen, SearchResultsScreen useEffect is called
name="Search"
component={SearchScreen}
/>     
</Tab.Navigator>
);
}

const MyStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Tabs">
{(props) => <MyTabs {...props}  />}
</Stack.Screen>
<Stack.Screen
name="SearchResults"
component={SearchResultsScreen}
/>
<Stack.Screen
name="Notifications"
component={NotificationsScreen}
// when I navigate from NotificationsScreen to SearchResultsScreen, SearchResultsScreen useEffect is NOT called
/>
</Stack.Navigator>

Answer 1

你可以使用通知组件

navigation.replace("SearchResults", null, null)

Answer 2

使用**useFocusEffect**在屏幕B上渲染每次屏幕聚焦这里是链接https://reactnavigation.org/docs/use-focus-effect/

import { useFocusEffect } from '@react-navigation/native';
function Profile({ userId }) {
const [user, setUser] = React.useState(null);
useFocusEffect(
React.useCallback(() => {
const unsubscribe = API.subscribe(userId, user => setUser(user));
return () => unsubscribe();
}, [userId])
);
return <ProfileContent user={user} />;
}

Answer 3

因为Stack屏幕B组件在你第一次导航到它的时候是挂载的，它调用了useEffect，然后你导航到屏幕C，这里B没有卸载，这就是为什么当你再次导航到屏幕B的时候它已经挂载了，所以useEffect没有执行。你只需要像下面这样卸载屏幕B

useEffect(()=>{
//useEffect stuff on mount
return () => {
//  on component unmount.
}
},[])