React Native: Android back button does not work when the screen re mounts

问题: I used componentDidMount and componentDidUnmount for android button to work. But when I come again to the same screen from another screen, the function which I have placed...

问题:

I used componentDidMount and componentDidUnmount for android button to work. But when I come again to the same screen from another screen, the function which I have placed in android back button does not work. It works initially when I load the screen for first time but when I go to another screen and come back to that screen again the function which I have placed in back button does not work.

when I tap on the nav bar below. When I go to the other screen and come back it is working fine.. But when I tap on the nav bar and navigate to other screen and then come back again to the screen then the function does not help!! I am in a great dilemma. Particularly to make it clear: I am on the home screen, I go-to description of the post, and then come back to home screen back button function of android works..But when I tap on the nav bar, navigate to other screen and then come back clicking on the nav bar, the function does not work. –

async componentDidMount() {
     BackHandler.addEventListener('hardwareBackPress',this.handleBackButtonClick);
}    
componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

async handleBackButtonClick() {

Alert.alert(
    'Exit the app?',
    'Are you sure you want to exit the app?',

    [
      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
      {text: 'OK', onPress: () => BackHandler.exitApp()},
    ],
    { cancelable: false }
  )

}

回答1:

First, make sure which method calls when you come back again to the screen.

componentWillMount() {

    console.log("componentWillMount");


    this.props.navigation.addListener(
      'willBlur',
      payload => {
        console.log('willBlur', payload);
      }
    );

    this.props.navigation.addListener(
      'willFocus',
      payload => {
        console.debug('willFocus', payload);
      }
    );

    this.props.navigation.addListener(
      'didFocus',
      payload => {
        console.debug('didFocus', payload);
      }
    );

    this.props.navigation.addListener(
      'didBlur',
      payload => {
        console.debug('didBlur', payload);
      }
    );
}



componentDidMount(){
    console.log("componentDidMount")
}

componentDidUpdate(){
    console.log("componentDidUpdate")
}

componentWillUnmount(){
    console.log("componentWillUnmount")
}

then run your function.


回答2:

You just use addListener for navigation.

Like this:

componentDidMount() {

    this.props.navigation.addListener(
      'didFocus',
      payload => {
        BackHandler.addEventListener('hardwareBackPress',this.handleBackButtonClick);
      }
    );

}

follow this link: addlistener-subscribe-to-updates-to-navigation-lifecycle

  • 发表于 2018-09-01 21:24
  • 阅读 ( 589 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除