自定义ui视频组件增加是否显示全屏可选参数

src/components/videoPro/index.tsx

@@ -9,17 +9,21 @@ import unfull from "@/static/img/exitFullscreen.png"
 
 type Props = {
   src: string
-  onRef: any
+  onRef?: any
+  showFull?: boolean
 }
 
-const VideoPro:FC<Props> = ({src,onRef}) => {
+const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
   const globalData = Taro.getApp().globalData
-  //用useImperativeHandle暴露一些外部ref能访问的属性
+
-  useImperativeHandle(onRef, () => {
+  if(onRef){
-    return {
+    //用useImperativeHandle暴露一些外部ref能访问的属性
-      func: pause,
+    useImperativeHandle(onRef, () => {
-    }
+      return {
-  })
+        func: pause,
+      }
+    })
+  }
 
   // 视频ui控制需要的响应式数据
   const videoContext = useRef<any>()
@@ -178,16 +182,16 @@ const VideoPro:FC<Props> = ({src,onRef}) => {
                     <Icon name="pause" color="#fff" size="23px" onClick={() => {videoContext.current.pause();setIsPlay(false)}} /> :
                     <Icon name="play" color="#fff" size="23px" onClick={() => {videoContext.current.play();setIsPlay(true)}} />
                 }
-                <Text className="text-white pl-1 font-26">{process_duration}</Text>
+                <Text className="text-white pl-2 font-26">{process_duration}</Text>
                 <View style={{flex:'1'}}>
                   <AtSlider onChange={sliderOnChange} onChanging={sliderOnChanging} step={1} value={sliderValue} activeColor='#fff' backgroundColor='#BDBDBD' blockColor='#fff' blockSize={10}></AtSlider>
                 </View>
-                <Text onClick={() => {
+                <Text className="text-white font-26 pr-2">{total_duration}</Text>
-                  isFull?videoContext.current.exitFullScreen():videoContext.current.requestFullScreen({direction:90})
+                { showFull &&
-                }} className="text-white font-26 pr-1">{total_duration}</Text>
+                  <>
-                {
+                    {isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => {videoContext.current.exitFullScreen()}} src={unfull} />
-                  isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => {videoContext.current.exitFullScreen()}} src={unfull} />
+                    : <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => {videoContext.current.requestFullScreen({direction:90})}}  />}
-                    : <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => {videoContext.current.requestFullScreen({direction:90})}}  />
+                  </>
                 }
               </>
             }

src/pages/preview/brand/article/article.tsx

@@ -155,7 +155,7 @@ const article: FC = () => {
             <View className={styles.articleTitle}>{articleInfo?.title}</View>
             {
               articleInfo?.owner_type === 1 && articleInfo?.brands?.map(d => (
-                <View className='flex align-center mb-4'>
+                <View key={d.id} className='flex align-center mb-4'>
                   <View className={`${styles.article} flex-1`}>
                     <Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType='avatar'/>
                     <View className='ml-2'>
@@ -183,7 +183,7 @@ const article: FC = () => {
 
             {
               articleInfo?.owner_type === 2 && articleInfo?.illness?.map(d => (
-                <View className='flex align-center mb-4'>
+                <View key={d.name} className='flex align-center mb-4'>
                   <View className={`${styles.article} flex-1`}>
                     <Img src={''} width={80} height={80} className={styles.articleImag} errorType='health'/>
                     <View className='ml-2'>

src/pages/preview/brand/info/info.tsx

@@ -24,7 +24,6 @@ const BrandInfo: FC = () => {
   const [enable, setEnable] = useState(true)
 
   let VideoRef = React.createRef<any>()
-
   Taro.useDidHide(() => {
     console.log("页面隐藏",VideoRef.current.func)
     // 视频被隐藏后自动暂停播放了，再打开自动继续播放了
@@ -103,7 +102,7 @@ const BrandInfo: FC = () => {
             onChange={onChange}
           >
             {brandInfo?.introductory_video_resource?.url && <SwiperItem>
-              <VideoPro onRef={VideoRef} src={"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}></VideoPro>
+              <VideoPro onRef={VideoRef} src={brandInfo.introductory_video_resource.url}></VideoPro>
             </SwiperItem>}
             {
               (brandInfo?.brand_album?.length || 0) > 0
@@ -132,7 +131,7 @@ const BrandInfo: FC = () => {
         <View className={styles['bottom']}>
           {
             articleList?.length ? <>{
-                articleList.map(d => <ArticlesBox data={d}/>)}
+                articleList.map(d => <ArticlesBox key={d.id} data={d}/>)}
                 <PageScript/>
               </>
               : <View className="py-6">