Настройка видео на экран с
Я пытаюсь настроить видео на ширину, чтобы ширина всегда была заполнена, а остальное "вырезано". Я пытаюсь это с помощью 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 };
Спасибо