Salir de devolución de llamada de pantalla Reaccionar Navegación Navegador de pestañas

Tengo un componente de pestaña de navegación de React como este:

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

¿Hay alguna manera de devolver la llamada al salir de una pantalla?

En este caso, me gustaría realizar una función cuando salgo de la pestaña Notificaciones, como marcar las notificaciones como vistas y eliminar el indicador de insignia.

A partir de ahora, estoy sacando el ícono de Notificación de otro componente para mostrar el número de identificación.

Gracias por adelantado.

Solución del problema

Una opción es usar onNavigationStateChangepara verificar el cambio actual de la navegación y realizar la acción que necesita para borrar las notificaciones, etc.

onNavigationStateChange(prevState, newState, action)

Función a la que se llama cada vez que cambia el estado de navegación gestionado por el navegador. Recibe el estado anterior, el nuevo estado de la navegación y la acción que emitió el cambio de estado. Por defecto imprime los cambios de estado en la consola.

Otra opción es usar addListener. De esta manera puedes suscribirte a willFocus/ didFocuso willBlur/ didBlur eventos y hacer la acción que necesites.

addListener - Suscríbete a las actualizaciones del ciclo de vida de la navegación

React Navigation emite eventos a los componentes de pantalla que se suscriben a ellos:

• willBlur- la pantalla estará desenfocada


• willFocus- la pantalla se enfocará


• didFocus- la pantalla enfocada (si hubo una transición, la transición se completó)


• didBlur- la pantalla desenfocada (si hubo una transición, la transición se completó)

Ejemplo de los documentos

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