回到页面刷新:
addListener- 订阅导航生命周期的更新
React Navigation 将事件发送到订阅了它们的页面组件:
willFocus -页面将获取焦点
didFocus - 页面已获取到焦点(如果有过渡动画,等过渡动画执行完成后响应)
willBlur - 页面将失去焦点
didFocus - 页面已获取到焦点(如果有过渡动画,等过渡动画执行完成后响应)

利用路由的addListener的willFoucus,在回到当前页面时获取数据,可以达到更新视图的效果

this.routerEvent = this.props.navigation.addListener("willFocus", payload => {
   this._getData();
});

在离开页面时移除监听事件:remove()

componentWillUnmount() {
 this.routerEvent && this.routerEvent.remove();
}

注意:如果该组件是一个子组件,则无法用路由事件

缓存问题(优化、降低成本):
场景:在tab页切换时每次点击标签都会向服务器重新发送一次请求
解决:新建一个数组/对象,在获取数据的时候把数据复制一份,在切换标签页(分发数据)的时候,如果该数组有值,则不需要向服务器发送请求。 在离开页面时,需要把缓存清空,

this.props.navigation.addListener("didBlur", payload => {
  this.setState({
    detailDataCache: {}
  });
});
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐