如何更改 expo-av 中的视频显示方向?

时间:2021-01-27 13:52:40

标签: react-native expo expo-av

我使用 expo-av 来显示视频。视频在 Portrait 中播放,我正在尝试根据设备方向显示视频。我的代码是:

import { Video } from 'expo-av';
import * as ScreenOrientation from 'expo-screen-orientation';
import NavigationHelper from '../../../../Helpers/NavigationHelper';

export default class VideoScreen extends Component {
  render() {
    const { route } = this.props;
    const { videoUri } = route.params;

    if (!videoUri) {
      NavigationHelper.back();
    }

    return (
      <ScrollView style={styles.container}>
        <Video
          source={{ uri: videoUri }}
          rate={1.0}
          volume={1.0}
          isMuted={false}
          resizeMode={Video.RESIZE_MODE_CONTAIN}
          shouldPlay
          isLooping
          useNativeControls
          style={{ width: 300, height: 300, alignSelf: 'center' }}
          onReadyForDisplay={() => { const naturalSize = ScreenOrientation.Orientation.PORTRAIT ? { orientation: 'portrait' } : { orientation: 'landscape' }; }}
        />
      </ScrollView>
    );
  }
}

我已经看到 onReadyForDisplay 是在视频准备好显示时调用的函数。该函数被传递一个包含以下键值对的字典: naturalSize:具有以下键值对的字典: orientation:描述视频数据自然方向的字符串,portraitlandscape。我已使用 expo-screen-orientation 获取设备方向。

如何根据设备方向旋转视频?

0 个答案:

没有答案