如何控制 React Navigation 的 focusHandler 的行为

Question

使用React Navigation的Drawer Navigation，我创建了具有以下结构的Navigation。

<Drawer.Navigator>
<Drawer.Screen name="First" component={First} />
<Drawer.Screen name="Second" component={Second} />
<Drawer.Screen name="Third" component={Third} />
</Drawer.Navigator>

每个抽屉屏幕组件都有堆栈导航的结构，看起来像下面的那个。我在每个抽屉组件中使用useContext创建了提供程序。(第一提供商、第二提供商、第三提供商)

<FirstProvider>
<Stack.Navigator>
<Stack.Screen name="FirstScreen" component={FirstScreen} />
<Stack.Screen name="FirstDetail" component={FirstDetail} />
</Stack.Navigator>
</FirstProvider>

我在FirstScreen中定义了focusHandler函数如下。在firstFunc的情况下，它是从FirstProvider获得的函数。

useEffect(() => {
const focusHandler = navigation.addListener("focus", firstFunc);
return focusHandler;
}, []);

我好奇的是：是否可以使foucsHandler仅在Drawer Navigation更改时工作？

例如，从FirstScreen移动到FirstDetail后，我希望focusHandler在返回FirstScreen时不工作。

作为另一个例子，如果我通过Drawer从First移动到Second，然后返回到First，我希望FirstScreen的focusHandler能够工作。

Answer 1

如果您希望仅在First屏幕的焦点状态发生变化时调用焦点侦听器，而不希望在FirstScreen屏幕上调用，则必须将逻辑移动到First屏幕。

如果您在FirstScreen中确实需要该逻辑，那么您可以在First屏幕中使用useIsFocused()，并通过上下文将其传递给FirstScreen，以便在其更改时执行某些操作。