How to know when a view with ReactNavigation will appear

Question

I am using ReactNavigation and wondering how I can determine when a view will appear (so that I can initiate a data update). I see this example using another NavigatorIOS navigator . Is there an equivalent to viewDidAppear or viewWillAppear? but not sure how it will work with https://reactnavigation.org/ .

I see console.log in navigation newsletters - but is there any event handler that I can connect to the screen / component to find out if this component / screen is in the foreground? Do I have to somehow connect to the method getStateForAction? https://reactnavigation.org/docs/routers/api . I don’t really want to create my own route handlers as such, just to determine if the foreground view will appear / be displayed, and I assume that I can use the navigation event for this somehow.

Answer 1

, , reducex , onNavigtionChange.

      <RootNavigation
        ref={nav => { this.navigator = nav; }}
        onNavigationStateChange={(prevState, currentState) => {
          const currentScreen = this.getCurrentRouteName(currentState);
          const prevScreen = this.getCurrentRouteName(prevState);
          if (prevScreen !== currentScreen) {
            this.props.broadcastActiveScreen(currentScreen);
            {/*console.log('onNavigationStateChange', currentScreen);*/}
          }
        }}
      />

import { createAction } from 'redux-actions';
import type { Dispatch } from '../state/store';

export const SCREEN_WILL_APPEAR = 'SCREEN_WILL_APPEAR';
const createScreenWillAppearAction = createAction(SCREEN_WILL_APPEAR);
export const broadcastActiveScreen = (activeScreen: string) => (
  (dispatch: Dispatch) => {
    dispatch(createScreenWillAppearAction(activeScreen));
  }
);

export default handleActions({
  [SCREEN_WILL_APPEAR]: (state, action) => {
    return Object.assign({}, state, {
      activeScreen: action.payload,
    });
  },
}, initialState);

  componentWillReceiveProps(nextProps) {
    if (nextProps.activeScreen === 'MyScreenName' && nextProps.activeScreen !== this.props.activeScreen) {
     // put your on view will appear code here
    }
   }

Answer 2

React Navigation . , . , componentWillMount componentDidMount. componentDidMount, .

, componentDidMount - . componentWillReceiveProps. .

: , WillReceiveProps . , . .