屏幕切换时的反应导航调用功能

Question

I need to acquire data from the server to load user set settings when the user changes screen. It is done by a function in the class. I have tried:

componentWillMount(){
  console.log("Sent to function");
  this.onSaveCats('initialize');
}

What does not post anything to console log. I have not found a good solution for triggering a function when a new screen is changed. Is there something I am missing?

  "dependencies": {
    "expo": "^20.0.0",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.47.0",
    "react-native-radio-buttons": "^1.0.0",
    "react-navigation": "^1.0.0-beta.11"
  }

Answer 1

In react navigation, we can subscribe to listeners and add corresponding callbacks. The four events that we can subscribe to listeners on are: willFocus, willBlur, didFocus and didBlur.

Usage in this case:

    export default class AnyScreen extends Component{
     constructor(props){
       super(props);
       const didBlurSubscription = this.props.navigation.addListener(
       'didBlur',
       payload => {
             console.debug('didBlur', payload);
       });
      }
    }

You can add similar subscription for didFocus as well by substituting 'didBlur' to any of the other options.

Once you're done listening, you can even remove the listener subscription:

didBlurSubscription.remove();

Hope this helps!