离开屏幕回调React Navigation选项卡导航器

Question

我有一个像这样的React Navigation Tab组件:

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} />
        )
    }
},{});

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

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

截至目前,我正在从其他组件中提取通知图标以显示数字徽章.

提前致谢.

Answer 1

一种选择是用于onNavigationStateChange检查导航的当前更改并执行清除通知等所需的操作.

onNavigationStateChange(prevState,newState,action)

每次导航器管理的导航状态发生变化时调用的函数.它接收先前的状态,导航的新状态和发出状态变化的动作.默认情况下,它会将状态更改打印到控制台.

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

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',
};