Блог

В моем приложении 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-native-video» есть эта проблема, элементы управления не отображаются внутри модального.

Используйте: npm i react-native-video-controls Это сервер для этой цели.

Для получения более подробной информации проверьте здесь