Question

我正在使用ReactNavigation，我想知道如何显示一个视图（以便我可以触发数据刷新）。我看到此示例使用了不同的导航器NavigatorIOS - Is there a viewDidAppear or viewWillAppear equivalent?，但不确定它如何与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
    }
   }

Answer 2

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

第一次呈现组件时， componentDidMount 是一个不错的选择。下次，您应该使用 componentWillReceiveProps 。重新生成组件时调用此函数。

<强>更新如果道具未更改，则不会触发 componentWillReceiveProps 。我认为这发生在你的情况。您应该编写自定义路由器或使用计时器按间隔触发。

Answer 3

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

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

请参阅文档here或here。这些例子并不是最好的。随时问您是否要举个例子！

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

3 个答案: