javascript - Where to call addListener in react native - Stack Overflow

admin管理员组

文章数量:1026380

We are working on React Native project. In that, We are showing tabbar in that and also sidebar too. So, for that side bar we added react-navigation library. But, In, Android, If user tap on that device's back button, if the drawer is opens, We have to close it.

So, We are adding addListener in ponentDidMount() and removing it in ponentWillUnmount().

But, The issue is, If I switch to another tab and e back to previous tab, And if we tap on device back button, The back button handler not calling due to listener is removed.

Is there any alternative which method will call always once we switched to previous screen.

We know, ponentDidMount only will call once while launching time of that screen.

We know we can call render method, But, We are expecting to call it in with good practice.

And is there any way to make it global way instead of writing call the classes closing drawer.

Code:

ponentDidMount() {
    BackHandler.addEventListener('backTapped', this.backButtonTap);
}
  ponentWillUnmount() {
    BackHandler.removeEventListener('backTapped', this.backButtonTap);

}

 backButtonTap = () => {
   navigation.dispatch(DrawerActions.closeDrawer());
}

Any suggestions?

We are working on React Native project. In that, We are showing tabbar in that and also sidebar too. So, for that side bar we added react-navigation library. But, In, Android, If user tap on that device's back button, if the drawer is opens, We have to close it.

So, We are adding addListener in ponentDidMount() and removing it in ponentWillUnmount().

But, The issue is, If I switch to another tab and e back to previous tab, And if we tap on device back button, The back button handler not calling due to listener is removed.

Is there any alternative which method will call always once we switched to previous screen.

We know, ponentDidMount only will call once while launching time of that screen.

We know we can call render method, But, We are expecting to call it in with good practice.

And is there any way to make it global way instead of writing call the classes closing drawer.

Code:

ponentDidMount() {
    BackHandler.addEventListener('backTapped', this.backButtonTap);
}
  ponentWillUnmount() {
    BackHandler.removeEventListener('backTapped', this.backButtonTap);

}

 backButtonTap = () => {
   navigation.dispatch(DrawerActions.closeDrawer());
}

Any suggestions?

• javascript
• react-native
• navigation-drawer
• react-navigation-drawer

Share Improve this question Follow edited Apr 9, 2019 at 9:59 Anilkumar iOS Developer asked Apr 9, 2019 at 9:51 Anilkumar iOS DeveloperAnilkumar iOS Developer 3,7651010 gold badges6161 silver badges120120 bronze badges 2

• Changing the active tab should change the parent ponent's state, so you can listen for that change and reattach the listener, maybe? – user5734311 Commented Apr 9, 2019 at 9:53
• Thanks so much for your quick reply @ChrisG, But, I am looking for any other default method or some property would be there to call this as with good practice. And is there any way to make it global way instead of writing call the classes closing drawer. – Anilkumar iOS Developer Commented Apr 9, 2019 at 9:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I would suggest to use react-navigation's own Navigation Lifecycle listener, so you can also handle different back button behaviour on different page.

ponentDidMount() {
    this.willFocusListener = navigation.addListener('willFocus', () => {
      BackHandler.addEventListener('backTapped', this.backButtonTap);
    });
    this.willBlurListener = navigation.addListener('willBlur', () => {
      BackHandler.removeEventListener('backTapped', this.backButtonTap);
    });
}

ponentWillUnmount() {
    this.willFocusListener.remove();
    this.willBlurListener.remove();
}

Then NavigationEvents ponent could be helpfull too

We are working on React Native project. In that, We are showing tabbar in that and also sidebar too. So, for that side bar we added react-navigation library. But, In, Android, If user tap on that device's back button, if the drawer is opens, We have to close it.

So, We are adding addListener in ponentDidMount() and removing it in ponentWillUnmount().

But, The issue is, If I switch to another tab and e back to previous tab, And if we tap on device back button, The back button handler not calling due to listener is removed.

Is there any alternative which method will call always once we switched to previous screen.

We know, ponentDidMount only will call once while launching time of that screen.

We know we can call render method, But, We are expecting to call it in with good practice.

And is there any way to make it global way instead of writing call the classes closing drawer.

Code:

ponentDidMount() {
    BackHandler.addEventListener('backTapped', this.backButtonTap);
}
  ponentWillUnmount() {
    BackHandler.removeEventListener('backTapped', this.backButtonTap);

}

 backButtonTap = () => {
   navigation.dispatch(DrawerActions.closeDrawer());
}

Any suggestions?

We are working on React Native project. In that, We are showing tabbar in that and also sidebar too. So, for that side bar we added react-navigation library. But, In, Android, If user tap on that device's back button, if the drawer is opens, We have to close it.

So, We are adding addListener in ponentDidMount() and removing it in ponentWillUnmount().

But, The issue is, If I switch to another tab and e back to previous tab, And if we tap on device back button, The back button handler not calling due to listener is removed.

Is there any alternative which method will call always once we switched to previous screen.

We know, ponentDidMount only will call once while launching time of that screen.

We know we can call render method, But, We are expecting to call it in with good practice.

And is there any way to make it global way instead of writing call the classes closing drawer.

Code:

ponentDidMount() {
    BackHandler.addEventListener('backTapped', this.backButtonTap);
}
  ponentWillUnmount() {
    BackHandler.removeEventListener('backTapped', this.backButtonTap);

}

 backButtonTap = () => {
   navigation.dispatch(DrawerActions.closeDrawer());
}

Any suggestions?

• javascript
• react-native
• navigation-drawer
• react-navigation-drawer

Share Improve this question Follow edited Apr 9, 2019 at 9:59 Anilkumar iOS Developer asked Apr 9, 2019 at 9:51 Anilkumar iOS DeveloperAnilkumar iOS Developer 3,7651010 gold badges6161 silver badges120120 bronze badges 2

• Changing the active tab should change the parent ponent's state, so you can listen for that change and reattach the listener, maybe? – user5734311 Commented Apr 9, 2019 at 9:53
• Thanks so much for your quick reply @ChrisG, But, I am looking for any other default method or some property would be there to call this as with good practice. And is there any way to make it global way instead of writing call the classes closing drawer. – Anilkumar iOS Developer Commented Apr 9, 2019 at 9:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I would suggest to use react-navigation's own Navigation Lifecycle listener, so you can also handle different back button behaviour on different page.

ponentDidMount() {
    this.willFocusListener = navigation.addListener('willFocus', () => {
      BackHandler.addEventListener('backTapped', this.backButtonTap);
    });
    this.willBlurListener = navigation.addListener('willBlur', () => {
      BackHandler.removeEventListener('backTapped', this.backButtonTap);
    });
}

ponentWillUnmount() {
    this.willFocusListener.remove();
    this.willBlurListener.remove();
}

Then NavigationEvents ponent could be helpfull too

本文标签： javascriptWhere to call addListener in react nativeStack Overflow