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

问题描述

在我的 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}
      />

为什么控件仅在模式上运行时才隐藏？

标签： react-nativereact-native-video

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

问题描述

解决方案

推荐阅读