将视频锁定为横向全屏方向(react-native-video)

时间:2017-04-11 07:43:43

标签: javascript react-native react-native-android react-native-ios

我想处理一些会导航到video.js文件的应用程序,该文件会自动触发视频以横向方向全屏播放。

我正在使用react-native-video 链接:https://github.com/react-native-community/react-native-video

render() {

    return (
      <View style={styles.container}>
        <View style={styles.fullScreen}>
          <Video
            ref={(ref) => {
              this.player = ref
            }}  
            source={require('../vid/intro-video.mp4')}
            style={styles.nativeVideoControls}
            rate={this.state.rate}
            paused={this.state.paused}
            volume={this.state.volume}
            muted={this.state.muted}
            resizeMode={this.state.resizeMode}
            onLoad={this.onLoad}
            onLoadStart={this.loadStart}
            onBuffer={this.onBuffer}
            onProgress={this.onProgress}
            onEnd={debounce(this.onEnd, 100)}
            repeat={false}
            controls={this.state.controls}
          />
        </View>
      </View>
    );
  }

我尝试在loadStart函数中添加这个belo代码,但它不起作用..当我旋转时,如果不是全屏模式,视频会出现在我的屏幕底部。

this.player.presentFullscreenPlayer()

enter image description here

我试过的解决方案: 1)在视图标签上使用onLayout但没有任何反应。 2)使用this.player.presentFullscreenPlayer()仍然没有解决问题。

1 个答案:

答案 0 :(得分:0)

我仍然没有找到针对此问题的修复解决方案,但我只想分享我为临时做的解决方法。

我使用另一个包react-native-orientation并在componentWillMount中触发lockToLandscape(),然后使用维度获取设备的宽度和高度

&#13;
&#13;
Orientation.lockToLandscape();
height = Dimensions.get('window').height;
width = Dimensions.get('window').width;
&#13;
&#13;
&#13;

我还在onLoad方法

中添加了presentFullScreenPlayer

&#13;
&#13;
this.player.presentFullscreenPlayer();
&#13;
&#13;
&#13;

并且我使用宽度和高度来设置视频播放器的宽度和高度来自设备的尺寸......

如果你们有其他方法,请分享:) 感谢