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个活动并执行您需要的操作。

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

Answer 2

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

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;

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

2 个答案: