Настройка видео на экран с

Я пытаюсь настроить видео на ширину, чтобы ширина всегда была заполнена, а остальное "вырезано". Я пытаюсь это с помощью response.naturalSize.width а также Dimensions.get('window').width, К несчастью, Dimensions доставляет высоту в дюймах и naturalSize пиксели. Есть ли другой способ достичь моей цели без преобразования пикселей или дюймов? Каким будет "чистое" решение?

Полный код:

import React, { Component } from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  Dimensions
} from 'react-native';
import Video from 'react-native-video';

const { width } = Dimensions.get('window');

class VideoPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = { paused: false, heightVideo: 360, widthVideo: 1 };
  }
  render() {
    const { path } = this.props;
    return (
      <TouchableOpacity
        style={styles.fullScreen}
        onPress={() => this.setState({ paused: !this.state.paused })}
      >
        <Video
          source={{ uri: path }} // Can be a URL or a local file.
          ref={(ref) => {
            this.player = ref;
          }} // Store reference
          rate={1.0} // 0 is paused, 1 is normal.
          volume={1.0} // 0 is muted, 1 is normal.
          paused={this.state.paused} // Pauses playback entirely.
          repeat
          resizeMode="contain"
          onLoad={response => {
            console.log(response);
            console.log(width / response.naturalSize.width);
            const combineStyles = StyleSheet.flatten([
              styles.backgroundVideo,
              { transform: [
                  { scaleY: 1 + (width / response.naturalSize.width) },
                  { scaleX: 1 + (width / response.naturalSize.width) }
                ] }
            ]);
            this.setState({ combineStyles });
          }}
          style={this.state.combineStyles}
        />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  backgroundVideo: {
    flex: 1,
  },
  fullScreen: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'black'
  },
});

export { VideoPlayer };

Спасибо

0 ответов

Другие вопросы по тегам