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

Question

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

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

任何线索将不胜感激

Answer 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

Answer 2

尝试使用 useEffect 挂钩来处理组件渲染更改。

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

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

Reload screen when the tab is changed?

javascript

reactjs

react-native

react-navigation

react-native-maps