46 lines
967 B
TypeScript
46 lines
967 B
TypeScript
import { memo, useEffect, useState } from 'react'
|
|
import { ViewStyle } from 'react-native'
|
|
import Video from 'react-native-video'
|
|
|
|
type Props = {
|
|
url?: string
|
|
poster?: string
|
|
style?: ViewStyle
|
|
} & React.ComponentProps<typeof Video>
|
|
|
|
const VideoBox = ({ url, poster, style, ...videoProps }: Props) => {
|
|
const [paused, setPaused] = useState(true)
|
|
|
|
const videoRef = (ref: any) => {
|
|
if (ref && !paused) {
|
|
ref.seek(0)
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
console.log('url--------', url);
|
|
|
|
setPaused(!Boolean(url))
|
|
}, [url])
|
|
|
|
return (
|
|
// 当 url 变化时通过 key 强制重载，确保自动播放生效
|
|
<Video
|
|
key={url ?? 'no-url'}
|
|
source={{ uri: url }}
|
|
poster={poster}
|
|
repeat
|
|
viewType={0}
|
|
controls={false}
|
|
resizeMode="cover"
|
|
volume={0}
|
|
muted
|
|
paused={paused}
|
|
style={style as any}
|
|
ref={videoRef}
|
|
{...videoProps}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default memo(VideoBox)
|