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

【问题标题】：How to tell when a view will appear with ReactNavigation如何使用 React Navigation 判断视图何时出现
【发布时间】：2017-04-14 21:16:12
【问题描述】：

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

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

【问题讨论】：

你的意思是当你从堆栈中弹出一个视图时？如果组件是第一次加载 componentWillMount() 被调用
我的意思是每次特定屏幕/组件在视图中处于活动状态时，例如当用户导航到主屏幕时，或者当应用程序事件导航到该屏幕时。
你有办法做到这一点吗？我也在为此苦苦挣扎。尤其是标签栏，所有视图通常都会立即加载，但我只对用户实际加载屏幕时的事件感兴趣。
是的 - 我会用答案更新问题。

标签： react-native react-navigation

【解决方案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
    }
   }

【讨论】：

【解决方案2】：

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

您需要在componentWillMount 和componentWillUnmount 方法中设置/取消设置它们。

请参阅文档 here 或 here。这些例子不是最好的。如果您想要一个示例，请随时询问！

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

但是 componentDidMount 只触发一次，即使它没有聚焦。即它在应用启动时触发一次 - 而不是在屏幕出现时触发 - 并且屏幕可以多次出现或聚焦。
我认为我遇到了一个问题，即使屏幕没有变化，componentWillReceiveProps 也会触发多次，因此很难将事件绑定到视图会出现场景