react-native回到页面刷新数据，离开页面时清除缓存

最新推荐文章于 2024-06-18 21:25:36 发布
最新推荐文章于 2024-06-18 21:25:36 发布
阅读量2.8k 收藏 3
点赞数
文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43582313/article/details/104896849
版权
本文介绍了在React Native中如何利用React Navigation的生命周期事件`willFocus`来实现在页面重新获得焦点时刷新数据，以及如何通过在离开页面时清除缓存来优化性能。当组件为子组件时，可能无法直接使用路由事件。同时，提出了一个解决方案，即创建一个数组或对象来缓存数据，避免在Tab页切换时重复请求服务器。在离开页面时，需要清空缓存以确保下次加载的数据是最新的。
摘要由CSDN通过智能技术生成

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

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

this.routerEvent = this.props.navigation.addListener("willFocus", payload => {
最低0.47元/天 解锁文章
Treasure°
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native回退后如何刷新界面
hahahhahahahha123456的博客
05-11 2488
问题：当我们在当前界面更改数据后，点击方法：this.props.navigation.goBack()后退，如何让前一个或者前一个的前一个有关联的界面刷新数据，保持数据的实时同步显示？ 注： 在这里我用的导航器为React Navigation，路由写法使其非常容易扩展导航逻辑，或是整合到redux中。 由于路由可以嵌套使用，因而开发者可以根据不同页面编写不同的导航逻辑，且彼此互不影响。 R...
react native 返回并刷新页面
热门推荐
lx_1024的博客
08-06 1万+
这个在项目中比较常见，可以根据不同的需求使用不同的方法实现。 1、如果是使用goback返回刷新，也就是返回上一级页面后刷新页面，这时可以使用回调方法。 例如：从A跳到B再回到A, A页面定义回调方法， this.props.navigation.navigate("B", { id: this.state.id, refresh: function () { ...
ReactNative进阶（十七）：RefreshControl 组件实现刷新效果
最新发布
2401_84617356的博客
06-18 156
/刷新文案的颜色。//标题显示在刷新指示器下方。//是否启用拉动刷新功能。//用于绘制刷新指示器的颜色（至少一种）。//刷新指示器的背景色。//刷新指示器的大小，请参见RefreshControl.SIZE。//进度视图顶部偏移。
react native 返回上一页并刷新上一页
qq_35089721的博客
09-19 3894
上一页： navigation.navigate('ReceiptFolder', {fileName: item.name,refresh:()=>this.getList()}) 点击页： navigation.getParam('refresh')(); navigation.goBack()
React Native 返回上一个页面后执行刷新逻辑
a day a better
04-11 5166
React Native 返回上一个页面后执行刷新逻辑 如题，在RN中，实现从页面A ->进入页面B，在页面B返回到页面A的时候，需要执行刷新逻辑。 代码实现思路： 在页面A中注册监听，当页面B销毁的时候（注意是销毁的时候，包括点击返回按钮、或者物理返回键），B页面通知A页面，A收到通知后，执行刷新逻辑即可。 代码实现参考： 页面A // 注册监听 componentWillMo...
react 回退至上一页并刷新数据
qq_56905650的博客
11-24 2206
网上有搜索出来大部分都是用useHistory，由于个人不太想回退react-router-dom(6.16.0)的版本。因此尝试除了useHistory之外的一些方法。
React-Native实战之（清理app缓存＋Redux合成）
vv_bug
01-20 1万+
前言：好久没写博客了，因为这段时间一直在搞rn，程序员真是一个苦逼的职业啊，被逼着去学习了下React Native，这东西吧，感觉有点原生app开发经验的童鞋上手还是比较容易的，搞前端的就更不用说了～分分钟就上手了，说多了都是泪啊。。。废话不多说了，先上一篇RN实战中用的一些东西，不为别的，就当笔记了，顺便总结一下所学知识，（ps：实战项目是花了点钱去某宝买的视频，这哥们讲的还不错，需要的童鞋可以
React-Native实战二（清理app缓存＋Redux ）
vv_bug
01-20 9295
前言：前面做了一下rn的清理app缓存功能，下面把前面说的rn中处理页面与页面之间的数据传递问题解决一下，在解决之前，我们先来认识一下什么是redux。先附上redux的官方demo地址：https://github.com/alinz/example-react-native-redux#counter-example 1、什么是redux？redux是一个用于管理js应用状态的容器。redux
React Native APP开发 写缓存和读缓存以及删缓存
SHUYANSAMA的博客
08-12 1176
版权归作者所有，任何形式转载请联系作者。 目录： 废话，写在开头 写缓存，程序结构及详细说明 贴出的写缓存代码。 读缓存，程序结构及详细说明 贴出的读缓存代码 贴出的删缓存代码及详解说明 废话： 正式涉足RN这个大坑，据说前辈光是安装和配置文件就卡了一两天，搞好以后给我们写了个安装跳坑文档，然后就开始对着视频自学RN了，不得不说，确实强大，有种搞定RN则前端开发世界任我遨游的错觉，当然了，前提是搞定了RN。学RN的同时还同步学习了下JS，兜兜转转写出来的程序我自己都怕。。。不过好在现在在前辈和同事还.
React Native--组件Component
寒江蓑笠的专栏
12-28 4646
创建一个Component一个组件类可以像前面Hello World工程中那样通过 class HelloWorldAppp extends Component 来创建，或者通过React.createClass来创建，并且提供一个render方法以及其他可选的生命周期函数、组件相关的事件或方法定义。因此，HelloWorldAppp和下面的实现方法是等价的:import React, { Comp
React Native回退后刷新界面
kdsde的专栏
10-22 5773
1、如果是使用goback返回刷新，也就是返回上一级页面后刷新页面，这时可以使用回调方法。 例如：从A跳到B再回到A, A页面定义回调方法， this.props.navigation.navigate("B", {     id: this.state.id,     refresh: function () {         this.init();     } }); B页面返回时调...
前进刷新，后退不刷新
红尘紫陌博客
05-16 401
首先在router/index.js中的routes中的每一项加上 meta: { keepAlive: false } 就按好像下面一样，注意，false代表不需要缓存，true代表需要缓存 { path: "/teamFun", name: "teamFun", component: teamFun, meta: { keepAlive: f...
RN/react：副作用刷新页面规则以及如何实现使用goback()也能刷新页面
m0_65544705的博客
09-25 689
也是因为这个副作用的存在改变变量之后页面才会跟着改变。当然上面我也说到了，再离开页面的时候也回执行一次，如果你不想再离开页面的时候执行，只想进入的时候执行你可以再这个useEffect里面添加一个if判定当isFocused为true时再执行这个useEffect里面的内容，反之也是一样的。在第二个参数为空数组的情况下，useEffect里面的内容只会执行一次，首次加载页面的2/4次页面刷新都只会执行第一次，后面再触发多少次的副作用也不会再执行里面的逻辑代码了。当然这个数组里面也可以存放多个变量以。
react-native navigation 返回刷新
学习笔记666
11-21 1304
<TouchableOpacity onPress={()=>this.turnTo()}> <Text> 123</Text> </TouchableOpacity> turnTo(){ this.props.navigation.n...
react native 界面跳转与点击事件
君无意的博客
03-23 3706
代码可以直接复制使用
react实现keepAlive 可手动清除缓存的
小漠007的专栏
09-08 3113
vue自带keepAlive功能这个大家都知道，但是如果是react呢？react功能特别单一的，只维护视图和数据渲染部分，其余的依赖三方包。今天讲的内容与第三方包reat-activation有关。
React Native框架详情页面返回上一页输入框聚焦问题
qq_41623635的博客
08-29 444
App运行在扫码枪系统上，详情页提交按钮提交成功之后返回上一页使用Ant Design Mobile 输入框组件即InputItem组件设置聚焦但键盘无法弹出，换成React Native原生输入框组件即TextInput组件在返回上一页的DeviceEventEmitter.addListener里设置ref.focus();.........
React页面变化页面数据清空问题
m0_46088410的博客
09-19 2286
采用 sessionStorage.setItem('paramsId,‘123’) 存储数据 componentDidMount () { sesstionStorage.getItem('paramsId') } localStorage 和sessionStorage的主要区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值