更改选项卡时重新加载屏幕？答案

【问题标题】：Reload screen when the tab is changed?更改选项卡时重新加载屏幕？
【发布时间】：2018-02-27 09:30:26
【问题描述】：

我的项目中有 2 个选项卡 - 外部选项卡和内部选项卡。在我的内部选项卡中，我有显示标记和详细信息的地图和列表。

现在，当我将选项卡从地图更改为列表时，我想重新加载（获取数据），反之亦然。我只能调用它们一次，即第一次访问，因为我一直从组件 Will Mount() 调用 API。如何识别标签移动并重新加载地图？

任何线索将不胜感激

【问题讨论】：

标签： javascript reactjs react-native react-navigation react-native-maps

【解决方案1】：

我猜你正在使用react-navigation。他们最近在其 API 中引入了导航监听器（willBlur、willFocus、didBlur 和 didFocus 事件）。

然后，一个想法是使用屏幕中的这些侦听器来刷新您需要的数据。

例子：

class YourComponent extends Component {
  componentDidMount() {
    this.didFocusListener = this.props.navigation.addListener(
      'didFocus',
      () => { console.log('did focus') },
    );
  }

  componentWillUnmount() {
    this.didFocusListener.remove();
  }

  render() {
    return ( /* your render */ );
  }
}

文档：Subscribe to updates to navigation lifecycle

【讨论】：

我应该在哪里添加这个监听器？因为 componentWillMount() 被调用一次。在 componentWillReceiveProps() 中添加这个监听器有效吗？
将其添加到您感兴趣的选项卡的componentDidMount() 中，不要忘记在componentWillUnmount() 中将其删除。我更新了我的帖子。

【解决方案2】：

尝试使用 useEffect 钩子来处理组件渲染变化。

useEffect(() => {
//core logic for component rerender
}, [dataChangelistener]);

【讨论】：