addListeners() 在屏幕中无法正常工作位于嵌套在堆栈中的选项卡内 React 导航

Question

我的应用程序使用React导航库，结构如下:

const RootStack = createNativeStackNavigator<RootTabParamList>();
<NavigationContainer theme={appTheme}>
<RootStack.Navigator>
<RootStack.Screen name="Tabs" component={Tabs}/>
<RootStack.Screen name="Screen A" />
<RootStack.Screen name="Screen B"/>
<RootStack.Screen name="Screen C"/>
</RootStack.Navigator>
</NavigationContainer>

Tabs是一个功能组件，它呈现另一个导航器，如下所示:

<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
<Tab.Screen name="Exit" component={Exit} />
</Tab.Navigator>

当我按tab退出时，我想听'tabPress'事件来处理我的逻辑。所以在React导航的文档之后，在我的Exit组件中我这样做了:

React.useEffect(() => {
return props.navigation.addListener('tabPress', (e) => {
console.log('Doing something when tabPress');
});
}, [props.navigation]);

文档链接:https://reactnavigation.org/docs/bottom-tab-navigator#events

但是我没有得到想要的结果。日志行不打印

这个问题的解决方案是什么?

Answer 1

您可以像这样收听tabPress事件。

<Tab.Screen name="Home" component={HomeScreen} 
listeners={({ navigation }) => ({
tabPress: (e) => {
e.preventDefault();
console.log('Doing something when tabPress');
},
})}
/>

Answer 2

不要在清理中使用该函数。应该是这样的。清理只在组件卸载时运行。

React.useEffect(() => {
const unsubscribe = props.navigation.addListener('tabPress', (e) => {
console.log('Doing something when tabPress');
});
return unsubscribe;
}, [props.navigation]);