refactor: 组件失焦清理图片缓存,解决页面长时间不动OOM
This commit is contained in:
parent
ef4114f694
commit
f4ef24b28f
31
.easignore
31
.easignore
|
|
@ -1,31 +1,6 @@
|
||||||
# Exclude other apps directories
|
|
||||||
../apps/*
|
|
||||||
!../apps/expo-duooomi-app
|
|
||||||
|
|
||||||
# Exclude unused packages from the monorepo
|
/android/
|
||||||
../packages/eslint-config/*
|
/ios/
|
||||||
../packages/flowgraph/*
|
/dist/
|
||||||
../packages/flowgraph-core/*
|
|
||||||
|
|
||||||
# Exclude root level files that aren't needed for this app
|
|
||||||
../.agent/
|
|
||||||
../.gitea/
|
|
||||||
../.vscode/
|
|
||||||
../BETTER_AUTH_体系交接文档.md
|
|
||||||
../CLAUDE.md
|
|
||||||
../FLOWGRAPH_交接文档.md
|
|
||||||
../FLOWGRAPH_思维导图.md
|
|
||||||
../STRIPE_CREDIT_BURNDOWN_交接文档.md
|
|
||||||
../ai-codegen-guideline.md
|
|
||||||
../debug-credit-burndown.js
|
|
||||||
../README.md
|
|
||||||
|
|
||||||
# Exclude development and configuration files
|
|
||||||
../.gitignore
|
|
||||||
../.prettierignore
|
|
||||||
../.prettierrc
|
|
||||||
|
|
||||||
# Only include necessary package management files
|
|
||||||
!../pnpm-workspace.yaml
|
|
||||||
!../package.json
|
|
||||||
!../pnpm-lock.yaml
|
|
||||||
|
|
|
||||||
|
|
@ -115,7 +115,7 @@ const VideoBox = ({ url, needWeb = true, width = 256, style, autoplay = true, ..
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Image
|
<Image
|
||||||
cachePolicy="memory-disk"
|
cachePolicy="disk"
|
||||||
source={{ uri: url }}
|
source={{ uri: url }}
|
||||||
style={style as any}
|
style={style as any}
|
||||||
transition={{ duration: 200, effect: 'cross-dissolve' }}
|
transition={{ duration: 200, effect: 'cross-dissolve' }}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ export const IOS_UNIVERSAL_LINK = 'duooomi.bowong.cn'
|
||||||
// 原生版本,原生代码变更时需要更新此版本号
|
// 原生版本,原生代码变更时需要更新此版本号
|
||||||
export const VERSION = '1.1.0'
|
export const VERSION = '1.1.0'
|
||||||
// JavaScript版本,JS代码变更时需要更新此版本号
|
// JavaScript版本,JS代码变更时需要更新此版本号
|
||||||
export const APP_VERSION = 'dev202601161658'
|
export const APP_VERSION = 'dev202601191538'
|
||||||
|
|
||||||
const ALIPAY_SCHEMA = 'alipay2021006119657394'
|
const ALIPAY_SCHEMA = 'alipay2021006119657394'
|
||||||
const ALIPAY_SCHEMA_SANDBOX = 'alipay9021000158673972'
|
const ALIPAY_SCHEMA_SANDBOX = 'alipay9021000158673972'
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { Ionicons } from '@expo/vector-icons'
|
||||||
import { useIsFocused } from '@react-navigation/native'
|
import { useIsFocused } from '@react-navigation/native'
|
||||||
import { Block, ConfirmModal, Img, ListEmpty, Text, Toast, VideoBox } from '@share/components'
|
import { Block, ConfirmModal, Img, ListEmpty, Text, Toast, VideoBox } from '@share/components'
|
||||||
import { FlashList } from '@shopify/flash-list'
|
import { FlashList } from '@shopify/flash-list'
|
||||||
|
import { Image } from 'expo-image'
|
||||||
import { LinearGradient } from 'expo-linear-gradient'
|
import { LinearGradient } from 'expo-linear-gradient'
|
||||||
import { router, useFocusEffect } from 'expo-router'
|
import { router, useFocusEffect } from 'expo-router'
|
||||||
import { observer } from 'mobx-react-lite'
|
import { observer } from 'mobx-react-lite'
|
||||||
|
|
@ -247,6 +248,15 @@ const Index = observer(function Index() {
|
||||||
}
|
}
|
||||||
}, [isAuthenticated, user?.id])
|
}, [isAuthenticated, user?.id])
|
||||||
|
|
||||||
|
// 页面失焦时清理内存缓存,减少内存占用
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isFocused) {
|
||||||
|
// 清理内存缓存,保留磁盘缓存
|
||||||
|
Image.clearMemoryCache()
|
||||||
|
// console.log('页面失焦,清理内存缓存')
|
||||||
|
}
|
||||||
|
}, [isFocused])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
userBalanceStore.stopPolling()
|
userBalanceStore.stopPolling()
|
||||||
|
|
@ -359,7 +369,7 @@ const Index = observer(function Index() {
|
||||||
const visibleIdsRef = useRef<Set<string>>(new Set())
|
const visibleIdsRef = useRef<Set<string>>(new Set())
|
||||||
const [visibilityVersion, setVisibilityVersion] = useState(0)
|
const [visibilityVersion, setVisibilityVersion] = useState(0)
|
||||||
|
|
||||||
// 可见性变化回调 - 简化版
|
// 可见性变化回调 - 优化版:减少状态更新频率
|
||||||
const onViewableItemsChanged = useCallback(
|
const onViewableItemsChanged = useCallback(
|
||||||
(info: { viewableItems: { isViewable: boolean; key: string; index: number | null }[] }) => {
|
(info: { viewableItems: { isViewable: boolean; key: string; index: number | null }[] }) => {
|
||||||
const { viewableItems } = info
|
const { viewableItems } = info
|
||||||
|
|
@ -368,23 +378,31 @@ const Index = observer(function Index() {
|
||||||
// 快速滑动时可能为空,保留上次状态
|
// 快速滑动时可能为空,保留上次状态
|
||||||
if (currentVisible.size === 0 && visibleIdsRef.current.size > 0) return
|
if (currentVisible.size === 0 && visibleIdsRef.current.size > 0) return
|
||||||
|
|
||||||
// 添加前后缓冲(减少到3个以降低内存占用)
|
// 添加前后缓冲(减少到3个item以降低内存占用)
|
||||||
if (viewableItems.length > 0 && allItems.length > 0) {
|
if (viewableItems.length > 0 && allItems.length > 0) {
|
||||||
const first = viewableItems[0]?.index ?? 0
|
const first = viewableItems[0]?.index ?? 0
|
||||||
const last = viewableItems[viewableItems.length - 1]?.index ?? first
|
const last = viewableItems[viewableItems.length - 1]?.index ?? first
|
||||||
|
|
||||||
if (first !== null && last !== null) {
|
if (first !== null && last !== null) {
|
||||||
for (let i = Math.max(0, first - 6); i < first; i++) {
|
// 每列3个,所以前后各加3行(9个item)
|
||||||
|
for (let i = Math.max(0, first - 9); i < first; i++) {
|
||||||
if (allItems[i]) currentVisible.add(allItems[i].id)
|
if (allItems[i]) currentVisible.add(allItems[i].id)
|
||||||
}
|
}
|
||||||
for (let i = last + 1; i < Math.min(allItems.length, last + 7); i++) {
|
for (let i = last + 1; i < Math.min(allItems.length, last + 10); i++) {
|
||||||
currentVisible.add(allItems[i].id)
|
currentVisible.add(allItems[i].id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 只有可见项发生显著变化时才更新状态(避免频繁重渲染)
|
||||||
|
const hasSignificantChange =
|
||||||
|
Math.abs(currentVisible.size - visibleIdsRef.current.size) > 3 ||
|
||||||
|
[...currentVisible].some((id) => !visibleIdsRef.current.has(id))
|
||||||
|
|
||||||
|
if (hasSignificantChange) {
|
||||||
visibleIdsRef.current = currentVisible
|
visibleIdsRef.current = currentVisible
|
||||||
setVisibilityVersion((v) => v + 1)
|
setVisibilityVersion((v) => v + 1)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
[allItems],
|
[allItems],
|
||||||
)
|
)
|
||||||
|
|
@ -429,9 +447,11 @@ const Index = observer(function Index() {
|
||||||
}
|
}
|
||||||
numColumns={3}
|
numColumns={3}
|
||||||
onEndReached={handleLoadMore}
|
onEndReached={handleLoadMore}
|
||||||
maxItemsInRecyclePool={0}
|
// 设置合理的回收池大小,避免内存无限增长
|
||||||
|
maxItemsInRecyclePool={12}
|
||||||
removeClippedSubviews={true}
|
removeClippedSubviews={true}
|
||||||
drawDistance={300}
|
// 减小预渲染距离,降低内存占用
|
||||||
|
drawDistance={150}
|
||||||
onEndReachedThreshold={0.3}
|
onEndReachedThreshold={0.3}
|
||||||
refreshControl={<RefreshControl colors={['#FFE500']} refreshing={refreshing} onRefresh={handleRefresh} />}
|
refreshControl={<RefreshControl colors={['#FFE500']} refreshing={refreshing} onRefresh={handleRefresh} />}
|
||||||
renderItem={renderItem}
|
renderItem={renderItem}
|
||||||
|
|
|
||||||
6
eas.json
6
eas.json
|
|
@ -7,7 +7,7 @@
|
||||||
"production": {
|
"production": {
|
||||||
"channel": "production",
|
"channel": "production",
|
||||||
"distribution": "internal",
|
"distribution": "internal",
|
||||||
"bun": "1.3.3",
|
"bun": "1.3.5",
|
||||||
"ios": {
|
"ios": {
|
||||||
"image": "latest"
|
"image": "latest"
|
||||||
},
|
},
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
"channel": "development",
|
"channel": "development",
|
||||||
"developmentClient": true,
|
"developmentClient": true,
|
||||||
"distribution": "internal",
|
"distribution": "internal",
|
||||||
"bun": "1.3.3",
|
"bun": "1.3.5",
|
||||||
"ios": {
|
"ios": {
|
||||||
"image": "latest"
|
"image": "latest"
|
||||||
},
|
},
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
"test": {
|
"test": {
|
||||||
"channel": "test",
|
"channel": "test",
|
||||||
"distribution": "internal",
|
"distribution": "internal",
|
||||||
"bun": "1.3.3",
|
"bun": "1.3.5",
|
||||||
"ios": {
|
"ios": {
|
||||||
"image": "latest"
|
"image": "latest"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ export const useUpdateChecker = ({
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// 使用 useInterval 进行定时检查
|
// 使用 useInterval 进行定时检查
|
||||||
const updateTimer = setInterval(checkForUpdates, enablePeriodicCheck ? interval : undefined)
|
// const updateTimer = setInterval(checkForUpdates, enablePeriodicCheck ? interval : undefined)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
hasUpdate,
|
hasUpdate,
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,9 @@
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"packageManager": "bun@1.3.5",
|
"packageManager": "bun@1.3.5",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"bun": {
|
||||||
|
"install": {}
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"postinstall": "patch-package",
|
"postinstall": "patch-package",
|
||||||
"claude": "claude --dangerously-skip-permissions",
|
"claude": "claude --dangerously-skip-permissions",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue