首页 > 其他分享 >react-native中嵌套的WebView发版后未更新问题

react-native中嵌套的WebView发版后未更新问题

时间:2023-12-13 14:57:37浏览次数:29  
标签:app refreshTime h5 react WebView 发版后 native

问题

使用了react-native-webview的WebView嵌套h5页面,但是当h5发版之后,重新打开app,h5还是发版前的页面。
并且这个缓存严重,每次都要清理缓存或者重装app,页面不能及时更新,影响用户体验。

解决

rn项目中,在h5链接后边拼接时间戳,代码如下:
注意:这里缓存使用的是@react-native-async-storage/async-storage。
代码中的customerStateStorage是自己封装的本地存储的公共方法,代码主要是提供思路

let refreshTime = await customerStateStorage.refreshTime;
let currentTime = new Date().getTime();
if (refreshTime && currentTime - refreshTime <= 30 * 60 * 1000) { // 30分钟后更新
   currentTime = refreshTime;
} else {
  customerStateStorage.setRefreshTime(currentTime);
}
const baseUrl = 'xxxx';
setWebViewUrl(baseUrl + '?' + currentTime);

以上代码相当于,在h5发版之后,30分钟后退出app,重新进入app,h5即可刷新。
这个时间自己可以按需修改,时间太短可能用户多次退出重进app,每次都需要重新加载h5相关资源。
最简单粗暴的方法也可以直接在链接后边拼接随机数或时间戳,即可实现每次退出重进app都可以重新加载h5.

标签:app,refreshTime,h5,react,WebView,发版后,native
From: https://www.cnblogs.com/ZerlinM/p/17899005.html

相关文章

  • React-native ios运行报错 No bundle URL present
    新建项目报错如下:需要手动生成ios下的main.jsbundle文件解决方法:1、生成main.jsbundle文件,在终端项目目录下执行:react-nativebundle--entry-fileindex.js--bundle-output./ios/main.jsbundle--platformios--assets-dest./ios--devfalse或在package.json里面添加以下执......
  • react_hooks系列 useCallback,高阶函数memo
    react_hooks的useCallback,高阶函数memo一、概念和作用1、memo高阶函数:memo解决的是函数式组件的无效渲染问题,当函数式组件重新渲染时,会先判断数据是否发生了变化。相当于类组件的PureComponent(默认提供ShouldComponentUpdate)2、useCallback:1)、useCallback会返回一个函数的memoiz......
  • React Hooks 钩子特性
    人在身处逆境时,适应环境的能力实在惊人。人可以忍受不幸,也可以战胜不幸,因为人有着惊人的潜力,只要立志发挥它,就一定能渡过难关。Hooks是React16.8的新增特性。它可以让你在不编写class组件的情况下使用state以及其他的React特性。ReactHooks表现形式是以use开头......
  • React 逃离闭包陷阱
    众所周知,JavaScript 中的闭包(Closures)一定是这种语言最可怕的特性之一,即使是无所不知的 ChatGPT 也是这样说的。另外它可能也是最隐蔽的语言特性之一,我们在编写 React 代码时经常会用到它,但是大多数时候我们甚至没有意识到这一点。但是,我们终究还是离不开它:如果我们想编写复......
  • react设置多个className
    react设置多个className 在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式。123456比如说有一个固定样式"title":<divclassName="title">标题</div>,然后还要一个点击高亮的样式:<divclassName={index=== this.sta......
  • react_hooks系列 useState
    一、作用:useState让函数式组件也可以处理状态。二、格式:1、定义状态:const[状态名,更新状态的函数]=React.useState(初始值|函数);​如:1)、基本类型的状态声明一个新的叫做“count”的state变量,初始值为0。​const[count,setCount]=React.useState(0);//useS......
  • react_hooks系列 useEffect
    一、作用​可以使得你在函数组件中执行一些带有副作用的方法。​每当React组件更新之后,就会触发useEffect,在第一次的render和每次update后的useEffect触发,不用再去考虑“初次挂载”还是“更新”。React保证了每次运行effect的同时,DOM都已经更新完毕。......
  • react-query使用
    usequery const{isPending,isLoading,error,data}=useQuery({//返回当前请求的状态,错误信息,以及返回的数据queryKey:['repoData'],//【必填】,自定义查询的键,类型为数组,也可以存放变量,[repoData,id],当id发生变化时,会自动请求接口queryFn:()=>//......
  • 小程序 webview 标题设置
    //小程序uni.setNavigationBarTitle设置后,会被webview页面的标题覆盖,后面再设置也不会刷新//在h5页面中设置,也会被vue的默认标题覆盖掉,并且之后无法刷新小程序显示的标题//只能在h5那边,vue页面router权限处理的地方(/router/permissions.ts中router.afterEach处),第一次给doc......
  • Reactor模型
    目录1.Reactor模型是什么2.Reactor模型应用场景3.使用Reactor模型的软件4.Reactor模型与Actor模型的关系本文主要介绍Reactor模型基本概念以及应用场景。1.Reactor模型是什么Reactor模型是一种事件驱动的设计模式,用于处理服务请求,它是由一个或多个并发输入源同时发送给......