React-Native-Video 在模态框内使用时不显示控件

Posted 2023-03-15

【中文标题】React-Native-Video 在模态框内使用时不显示控件

【英文标题】：React-Native-Video doesn't show control when it is used inside a modal

【发布时间】：2020-08-27 10:34:17

【问题描述】：

在我的 RN 应用程序中，我使用 react-native-video。在屏幕内使用时它可以正常工作。控件可见。但是当我在模态中尝试它时，视频可以工作，但控件不显示。

这是代码。

视频播放器组件。

import React from 'react';
import  StyleSheet  from 'react-native';
import Video,  LoadError  from 'react-native-video';

import Logger from 'library/logger';

// import  toggleSpinner  from 'Redux/common/common.actions';
import  store  from 'store';

const VideoPlayer = ( source, ...otherProps : IProps) => 
  const handleError = (error: LoadError) => 
    Logger.log('VIDEO_LOADING_ERROR', 'Error occured while loading the video', error);
  ;

  const onLoadStart = () => 
    // store.dispatch(toggleSpinner(true));
  ;

  const onLoadEnd = () => 
    // store.dispatch(toggleSpinner(false));
  ;

  return (
    <Video
      source= uri: source 
      controls=true
      repeat=otherProps.repeat
      onLoadStart=onLoadStart
      onReadyForDisplay=onLoadEnd
      resizeMode=otherProps.videoResizeMode
      onError=(error: LoadError) => handleError(error)
      style=styles.videoPlayer
    />
  );
;

const styles = StyleSheet.create(
  videoPlayer: 
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    height: 300,
  ,
);

interface IProps 
  controls: boolean;
  source: string;
  repeat: false;
  videoResizeMode: 'stretch' | 'contain' | 'cover' | 'none' | undefined;


VideoPlayer.defaultProps = 
  videoResizeMode: 'stretch',
  repeat: true,
  controls: true,
;

export default VideoPlayer;

模态。

const VideoModal = ( active, data, onClose : IProps) => (
  <Modal
    visible=active
    // fullScreen=true
    // animationType='slide'
    onRequestClose=() => onClose()>
    /* <View style=styles.modalContentContainer> */
    <VideoPlayer source=data.source />
    /* </View> */
  </Modal>
);

像这样调用模态。

 <VideoModal
        active=videoModalActive
        data=
          source:
            'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
          // 'file:///storage/emulated/0/Movies/campaignVideo.mp4',
        
        onClose=toggleVideoModal
      />

为什么只有在modal上运行时控件才隐藏？

【参考方案1】：

"react-native-video" 有这个问题，Modal 中不显示控件。

使用： npm i react-native-video-controls 它服务于目的。

For more details check here