使用React Navigation浏览堆栈时重新渲染组件 [英] Re-render component when navigating the stack with React Navigation

问题描述

我目前正在使用 react-navigation 进行堆栈和选项卡导航.

I am currently using react-navigation to do stack- and tab- navigation.

是否可以在用户每次导航到特定屏幕时重新渲染组件?我想确保每次到达特定屏幕时都重新运行 componentDidMount()，以便通过调用适当的操作创建者从服务器获取最新数据.

Is it possible to re-render a component every time the user navigates to specific screens? I want to make sure to rerun the componentDidMount() every time a specific screen is reached, so I get the latest data from the server by calling the appropriate action creator.

我应该看什么策略?我很确定这是一种常见的设计模式，但是我看不到记录在案的示例.

What strategies should I be looking at? I am pretty sure this is a common design pattern but I failed to see documented examples.

推荐答案

反应导航生命周期事件，引用自反应导航向订阅它们的屏幕组件发出事件.您可以订阅四个不同的事件:willFocus，willBlur，didFocus和didBlur.在API参考中详细了解它们.

React Navigation emits events to screen components that subscribe to them. There are four different events that you can subscribe to: willFocus, willBlur, didFocus and didBlur. Read more about them in the API reference.

让我们检查一下

使用导航侦听器您可以在页面上添加一个事件监听器，并在每次页面聚焦时调用一个函数.

With navigation listeners you can add an eventlistener to you page and call a function each time your page will be focused.

const didBlurSubscription = this.props.navigation.addListener(
  'willBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

替换有效载荷功能，并使用刷新"功能对其进行更改.

Replace the payload function and change it with your "refresh" function.

希望这会有所帮助.

这篇关于使用React Navigation浏览堆栈时重新渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！