526互联

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

发布时间 2023-12-13 14:46:19作者: ZerlinM

问题

使用了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相关资源。