如何使用 React Navigation 判断视图何时出现

Question

我正在使用 ReactNavigation 并想知道如何判断视图何时出现（以便我可以触发数据刷新）。我看到这个例子使用不同的导航器 NavigatorIOS - Is there a viewDidAppear or viewWillAppear equivalent? but not sure how it would work with https://reactnavigation.org/.

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

Answer 1

当使用 React Navigation 时，您提供组件作为屏幕。你可以在里面处理你想要的东西。这些是反应组件，所以它们有 componentWillMount 和 componentDidMount。最好使用 componentDidMount 因为它不会阻塞渲染。

对于第一次渲染的组件，componentDidMount 是一个不错的选择。下次，您应该使用 componentWillReceiveProps。当组件再次渲染时调用此函数。

更新： 如果道具没有改变， componentWillReceiveProps 将不会被触发。我认为它发生在你的情况下。您应该编写自定义路由器或使用计时器以间隔触发。

Answer 2

所以我通过创建一个跟踪活动屏幕的 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
    }
   }

Answer 3

我认为 didFocus、willFocus、didBlur 和 willBlur 活动将满足您的需求。

您需要在 componentWillMount 和 componentWillUnmount 方法中 set/unset 它们。

查看文档 here or here。这些例子并不是最好的。如果你想要一个例子，请随意询问！

如何使用 React Navigation 判断视图何时出现

How to tell when a view will appear with ReactNavigation

react-native

react-navigation