如何判断视图何时与ReactNavigation一起出现

Question

我正在使用ReactNavigation,我想知道如何显示一个视图(这样我就可以触发数据刷新).我看到这个例子使用了不同的导航器NavigatorIOS - 是否有viewDidAppear或viewWillAppear等效？但不确定如何使用https://reactnavigation.org/.

我在导航调度上看到console.log - 但是有一些事件处理程序可以在屏幕/组件级别挂钩以了解该组件/屏幕是否在前台？我应该getStateForAction以某种方式挂钩方法吗？ https://reactnavigation.org/docs/routers/api.我不想真正创建自定义路由处理程序本身,只是为了检测视图是否进入前景/将出现,我猜我可以使用导航事件以某种方式做到这一点.

Answer 1

因此，我通过创建一个 redux 操作和存储来跟踪活动屏幕并将其附加到根导航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
    }
   }