react-native - 如何使用 ReactNavigation 判断 View 何时出现

Question

我正在使用 ReactNavigation 并且想知道如何判断 View 何时出现(以便我可以触发数据刷新)。我看到这个例子使用不同的导航器 NavigatorIOS - Is there a viewDidAppear or viewWillAppear equivalent?但不确定它如何与 https://reactnavigation.org/ 一起使用.

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

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));
  }
);

reducer

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
    }
   }