离开屏幕回调 React Navigation Tab Navigator答案

【问题标题】：Leave screen callback React Navigation Tab Navigator离开屏幕回调 React Navigation Tab Navigator
【发布时间】：2018-03-19 21:19:21
【问题描述】：

我有一个这样的 React 导航选项卡组件：

const RootNavigator=TabNavigator({
Home:{
    screen: Home
    ,navigationOptions:{
        tabBarIcon: ({focused}) => (
            <Icon
                name={focused?'ios-home':'ios-home-outline'}
                style={{color:'#464646'}}
                size={16}
            />
        )
    }
},
Notifications:{
    screen: Notifications
    ,navigationOptions:{
        tabBarIcon: ({focused}) => (
            <TabNotifications focused={focused} />
        )
    }
},{});

有没有办法在离开屏幕时进行回调？

在这种情况下，我想在离开通知选项卡时执行一项功能。例如将通知标记为已见并删除徽章指示器。

到目前为止，我正在从另一个组件中提取通知图标以显示数字徽章。

提前致谢。

【问题讨论】：

标签： node.js react-native react-navigation

【解决方案1】：

一种选择是使用onNavigationStateChange 检查导航的当前变化并执行清除通知等所需的操作。

onNavigationStateChange(prevState, newState, action)

每次由导航器的变化。它接收先前的状态，新的状态导航和发出状态更改的操作。默认情况下它将状态更改打印到控制台。

另一种选择是使用addListener。这样您就可以订阅willFocus/didFocus 或willBlur/didBlur 事件并执行您需要的操作。

addListener - 订阅导航生命周期的更新

React Navigation 向订阅的屏幕组件发出事件他们：

willBlur - 屏幕将失焦

willFocus - 屏幕将聚焦

didFocus - 屏幕聚焦（如果有过渡，则过渡完成）

didBlur - 屏幕失焦（如果有过渡，则过渡完成）

文档中的示例

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);
// Remove the listener when you are done
didBlurSubscription.remove();

// Payload
{
  action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
  context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
  lastState: undefined,
  state: undefined,
  type: 'didBlur',
};

【讨论】：

我使用了 addListener 函数 this.props.navigation 并按预期工作。谢谢！
哪个生命周期方法移除监听器。请帮忙。
@VinodRanga 取决于您订阅侦听器的位置和您的组件逻辑。您很可能可以删除 componentWillUnmount 上的侦听器

【解决方案2】：

对于那些想要第三个选项的人，您可以按照docs 的建议使用NavigationEvents 组件来收听导航挂钩以及您打算做的任何事情。

编辑：这是 React Navigation 2.x 的文档，不是更长时间的积极维护。有关最新文档，请参阅最新版本 (5.x)。

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const MyScreen = () => (
  <View>
    <NavigationEvents
      onWillFocus={payload => console.log('will focus',payload)}
      onDidFocus={payload => console.log('did focus',payload)}
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
    {/* 
      Your view code
    */}
  </View>
);

export default MyScreen;

【讨论】：