bowong
/
expo-duooomi-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加占位图支持，优化 Img 和 Video 组件，更新 OTA 升级逻辑

This commit is contained in:
康猛 2026-01-23 14:21:40 +08:00
parent 4268f1a905
commit 14c84de1ce
9 changed files with 143 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
@share/components/Img.tsx
View File

@ -1,5 +1,6 @@
import { Image as ExpoImage, type ImageProps as ExpoImageProps } from 'expo-image'
import React, { forwardRef, memo, useMemo } from 'react'
import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react'
import { View } from 'react-native'
import tw from 'twrnc'
interface ImgProps extends ExpoImageProps {
@ -11,6 +12,8 @@ interface ImgProps extends ExpoImageProps {
isCompression?: boolean
/** 自定义缓存键，用于需要重定向的 URL */
cacheKey?: string
/** 占位图 URL，在真实图片加载完成前显示 */
placeholderSrc?: string
}
// ExpoImage.clearDiskCache()
@ -24,15 +27,22 @@ const Img = forwardRef<ExpoImage, ImgProps>((props, ref) => {
className = '',
style = {},
src,
errorSource,
source: propSource,
cacheKey,
width = 256,
isCompression = false,
isWebP = true,
placeholderSrc,
onLoad,
...reset
} = props
const [isLoaded, setIsLoaded] = useState(false)
useEffect(() => {
setIsLoaded(false)
}, [src])
const imageStyle = tw`${className}`
// 静态图全部压缩jpg
@ -49,47 +59,77 @@ const Img = forwardRef<ExpoImage, ImgProps>((props, ref) => {
// 构建图片源
const imageSource = useMemo(() => {
// 如果提供了source属性，优先使用
if (propSource) return propSource
if (!src) return undefined
if (typeof src === 'number') {
// 本地图片资源（require导入的资源ID）
return src
} else {
// 网络图片或本地文件路径
if (isNetworkImage(src)) {
const finalUrl = isCompression ? compressionUrl : src
// console.log('finalUrl-------------', finalUrl)
return {
uri: finalUrl,
cacheKey: cacheKey || finalUrl,
}
} else {
// 本地文件路径
return { uri: src }
}
}
}, [src, propSource, cacheKey, isCompression, compressionUrl])
const imgProps = {
style: [style, imageStyle],
ref,
source: imageSource,
// 使用 disk 缓存策略，减少内存占用
cachePolicy: 'disk' as const,
// 添加内存缓存上限，当内存紧张时优先释放
recyclingKey: typeof src === 'string' ? src : undefined,
errorSource,
transition: { duration: 200, effect: 'cross-dissolve' as const },
...reset,
const handleLoad = (e: any) => {
console.log('handleLoad--------------', e)
setIsLoaded(true)
onLoad?.(e)
}
return <ExpoImage {...imgProps} />
// 无占位图时直接返回原图
if (!placeholderSrc) {
return (
<ExpoImage
ref={ref}
style={[style, imageStyle]}
source={imageSource}
cachePolicy="disk"
recyclingKey={typeof src === 'string' ? src : undefined}
transition={{ duration: 200, effect: 'cross-dissolve' }}
onLoad={onLoad}
{...reset}
/>
)
}
// return <Image style={[style, imageStyle]} source={{ uri: compressionUrl(src as string) }} />
const showPlaceholder = placeholderSrc
// 有占位图时使用层叠布局
return (
<View style={[style, imageStyle, { overflow: 'hidden' }]}>
{/* 占位图层 - 加载完成后隐藏 */}
{showPlaceholder && (
<ExpoImage
style={{ position: 'absolute', width: '100%', height: '100%' }}
source={{ uri: placeholderSrc }}
cachePolicy="disk"
contentFit={reset.contentFit || 'cover'}
transition={{ duration: 100, effect: 'curl-up' }}
/>
)}
{/* 真实图片层 */}
<ExpoImage
ref={ref}
style={{ width: '100%', height: '100%', opacity: isLoaded ? 1 : 0 }}
source={imageSource}
cachePolicy="disk"
recyclingKey={typeof src === 'string' ? src : undefined}
transition={{ duration: 300, effect: 'cross-dissolve' }}
onLoad={handleLoad}
contentFit={reset.contentFit || 'cover'}
{...reset}
/>
</View>
)
})
Img.displayName = 'Img'

61
@share/components/Video.tsx
View File

@ -1,12 +1,15 @@
import { Image, type ImageRef } from 'expo-image'
import { Image as ExpoImage, type ImageRef } from 'expo-image'
import { memo, useEffect, useRef, useState } from 'react'
import { type ViewStyle } from 'react-native'
import { View, type ViewStyle } from 'react-native'
import Video from 'react-native-video'
import tw from 'twrnc'
import { videoUrlCache } from '@/utils/storage'
type Props = {
className?: string
url?: string
placeholderUrl?: string
needWeb?: boolean
style?: ViewStyle
width?: number
@ -14,7 +17,16 @@ type Props = {
} & React.ComponentProps<typeof Video>
// 默认宽度256半屏宽度
const VideoBox = ({ url, needWeb = true, width = 256, style, autoplay = true, ...videoProps }: Props) => {
const VideoBox = ({
className = '',
url,
placeholderUrl = '',
needWeb = true,
width = 256,
style,
autoplay = true,
...videoProps
}: Props) => {
const [urlFinal, setUrlFinal] = useState('')
const imageRef = useRef<ImageRef | null>(null)
@ -114,7 +126,7 @@ const VideoBox = ({ url, needWeb = true, width = 256, style, autoplay = true, ..
)
}
return (
<Image
<ExpoImage
cachePolicy="disk"
source={{ uri: url }}
style={style as any}
@ -123,19 +135,36 @@ const VideoBox = ({ url, needWeb = true, width = 256, style, autoplay = true, ..
)
}
const imageStyle = tw`${className}`
const showPlaceholder = !!placeholderUrl
return (
// 移除 key 避免组件重建导致闪烁，使用 transition 实现平滑切换
<Image
ref={imageRef}
// 只使用 disk 缓存，减少内存占用
cachePolicy="disk"
// 添加 recyclingKey 帮助内存回收
recyclingKey={urlFinal}
source={{ uri: urlFinal }}
style={style as any}
autoplay={autoplay}
transition={{ duration: 200, effect: 'cross-dissolve' }}
/>
<View style={[style, imageStyle, { overflow: 'hidden' }]}>
{/* 占位图层 - 加载完成后隐藏 */}
{showPlaceholder && (
<ExpoImage
style={{ position: 'absolute', width: '100%', height: '100%' }}
source={{ uri: placeholderUrl }}
cachePolicy="disk"
contentFit={'cover'}
transition={{ duration: 100, effect: 'curl-up' }}
/>
)}
{/* 真实图片层 */}
<ExpoImage
ref={imageRef}
// 只使用 disk 缓存，减少内存占用
cachePolicy="disk"
// 添加 recyclingKey 帮助内存回收
recyclingKey={urlFinal}
source={{ uri: urlFinal }}
style={style as any}
autoplay={autoplay}
transition={{ duration: 200, effect: 'cross-dissolve' }}
/>
</View>
)
}

2
app.config.js
View File

@ -10,7 +10,7 @@ export const IOS_UNIVERSAL_LINK = 'duooomi.bowong.cn'
// 原生版本，原生代码变更时需要更新此版本号
export const VERSION = '1.2.0'
// JavaScript版本，JS代码变更时需要更新此版本号
export const APP_VERSION = 'dev202601211414'
export const APP_VERSION = 'dev202601221539'
const ALIPAY_SCHEMA = 'alipay2021006119657394'
const ALIPAY_SCHEMA_SANDBOX = 'alipay9021000158673972'

20
app/(tabs)/explore.tsx
View File

@ -61,6 +61,7 @@ export default observer(function TabTwoScreen() {
const [otaUrl, setOtaUrl] = useState(
userStore.scannedQR ?? 'https://cdn.roasmax.cn/upload/bf25206ab8644a8fb914aad5cf0fca08.bin',
)
const [comType, setComType] = useState('0x02') // 默认OTA_PACKAGE类型为128
useEffect(() => {
if (userStore.scannedQR) {
@ -138,10 +139,10 @@ export default observer(function TabTwoScreen() {
renderContent: () => <SyncProgressToast title="OTA升级中" />,
duration: 0,
})
const buffer = await bleManager.performOtaUpgrade(otaUrl, (progress) => {
// 进度在 bleStore.transferProgress 中同步显示，这里仅可选处理
})
Toast?.show({ title: `OTA升级完成 (${buffer.byteLength} bytes) ` })
const buffer = await bleManager.performOtaUpgrade(otaUrl, comType)
Toast.hide()
Toast?.show({ title: `OTA升级完成 (${buffer.byteLength} bytes) `, duration: 2e3 })
} catch (error) {
console.error('OTA upgrade failed:', error)
const msg = typeof error === 'string' ? error : (error as any)?.message || 'OTA升级失败'
@ -426,6 +427,17 @@ export default observer(function TabTwoScreen() {
/>
</ThemedView>
<ThemedView style={{ marginTop: 8 }}>
<ThemedText style={{ marginBottom: 4 }}>蓝牙头设置 Command Type:</ThemedText>
<TextInput
placeholder="蓝牙头"
style={styles.input}
value={comType}
onChangeText={setComType}
placeholderTextColor="#999"
/>
</ThemedView>
<ThemedView style={{ marginTop: 8 }}>
<ThemedText style={{ marginBottom: 4 }}>OTA URL:</ThemedText>
<TextInput

8
app/(tabs)/index.tsx
View File

@ -598,6 +598,7 @@ const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem,
const Width = 216
const previewUrl = selectedItem?.webpHighPreviewUrl || selectedItem?.webpPreviewUrl || ''
const placeholderUrl = selectedItem?.webpPreviewUrl || ''
return (
<Block className="relative z-10 items-center">
@ -605,7 +606,12 @@ const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem,
<Block className="flex-1">
<Block className="relative z-10 mt-[20px] flex size-[224px] rounded-full border-4 border-black shadow-deep-black">
<Block className="relative size-full overflow-hidden rounded-full">
<Img style={{ height: Width, width: Width, borderRadius: Width }} width={256} src={previewUrl} />
<Img
style={{ height: Width, width: Width, borderRadius: Width }}
width={256}
placeholderSrc={placeholderUrl}
src={previewUrl}
/>
</Block>
<Block className="pointer-events-none absolute inset-0 rounded-full border-2 border-black/10" />

4
app/(tabs)/sync.tsx
View File

@ -956,7 +956,7 @@ const TopCircleSection = memo(
const GalleryRenderer = memo(({ selectedItem }: { selectedItem: any }) => {
const url = selectedItem?.url || selectedItem?.imageUrl
const placeholderUrl = selectedItem?.imageUrl
// console.log('GalleryRenderer--------------', selectedItem)
if (!url) return null
@ -967,7 +967,7 @@ const GalleryRenderer = memo(({ selectedItem }: { selectedItem: any }) => {
className="relative z-10 border-4 border-black"
style={{ width: Width, height: Width, borderRadius: Width, overflow: 'hidden' }}
>
<VideoBox style={{ width: Width, height: Width }} width={Width} url={url} />
<VideoBox style={{ width: Width, height: Width }} width={Width} placeholderUrl={placeholderUrl} url={url} />
</View>
)
})

4
app/pointList.native.tsx
View File

@ -84,8 +84,8 @@ const ChargePage = observer(function ChargePage() {
const { data, error } = await handleError(
async () =>
await alipay.preRecharge({
credits: 2,
// credits: parseInt(selectedRecharge?.points.replace(/,/g, '')),
// credits: 2,
credits: parseInt(selectedRecharge?.points.replace(/,/g, '')),
}),
)

9
ble/managers/bleManager.ts
View File

@ -649,7 +649,11 @@ class BleManager {
}
}
async performOtaUpgrade(url: string, onProgress?: (progress: number) => void): Promise<ArrayBuffer> {
async performOtaUpgrade(
url: string,
comType = '0x02',
onProgress?: (progress: number) => void,
): Promise<ArrayBuffer> {
const state = bleStore.state
if (!state.connectedDevice) {
const error = 'No device connected'
@ -687,7 +691,8 @@ class BleManager {
await this.fileTransferService.transferFile(
state.connectedDevice.id,
arrayBuffer,
COMMAND_TYPES.OTA_PACKAGE,
// COMMAND_TYPES.OTA_PACKAGE,
Number(comType),
(progress) => {
bleStore.setState((prev) => ({ ...prev, transferProgress: progress * 100 }))
onProgress?.(progress)

2
ble/protocol/Constants.ts
View File

@ -35,7 +35,7 @@ export const COMMAND_TYPES = {
PREPARE_TRANSFER: 0x14,
} as const
export type APP_COMMAND_TYPES = (typeof COMMAND_TYPES)[keyof typeof COMMAND_TYPES]
export type APP_COMMAND_TYPES = (typeof COMMAND_TYPES)[keyof typeof COMMAND_TYPES] | number
export const EVENT_TYPES = {
TRANSFER_OTA_PACKAGE: {