Question

我对React本机主题很陌生。我被困在视频播放器方向非常简单的检查条件中。

我的代码步骤是：

下面的代码是我的状态，boolean。

state = {
    viewmode: false,
};

2。下面的代码行是我的视频播放器图标（横向和纵向）。

<TouchableWithoutFeedback onPress={this.changeViewModes}>
  <MIcon name={!this.state.viewmode ? "fullscreen" : "fullscreen-exit"} size={30} color="#FFF"></MIcon>
</TouchableWithoutFeedback>

到目前为止，到目前为止一切都很好。但在需要时，视频播放器必须旋转到横向模式和纵向模式。
所以我写了一个条件，它不能正常工作，并且只显示一种模式，无论是纵向还是横向但不能旋转

changeViewModes = () => {
  if (!this.state.viewmode == false) {
    //fullscreen
    this.player.presentFullscreenPlayer();
    Orientation.lockToLandscape();
  } else {
    //fullscreen_exit
    Orientation.lockToPortrait();
  }
};

视频组件代码

<Video  paused={this.state.paused}
        source={LightVideo}
        style={{ width: "100%", height }}
        resizeMode="contain"
        onLoad={this.handleLoad}
        onProgress={this.handleProgress}
        onEnd={this.handleEnd}
        ref={ref =>

 { this.player = ref;}}
          />

任何人都可以帮助我将视频播放器从横向模式旋转到纵向模式，反之亦然。

Answer 1

我拥有viewmodel true表示全屏显示。然后单击您的Mico更改全屏。

// this is your video component
Video source={{uri: "background"}}   
       ref={(ref) => {
         this.player = ref
       } />

state = {
viewmode: false, // true means full screen
};

<TouchableWithoutFeedback onPress = {this.changeViewModes}>
              <MIcon name = {!this.state.viewmode ? "fullscreen" : "fullscreen-exit"} size = {30} color="#FFF"></MIcon>
              </TouchableWithoutFeedback>

changeViewModes = () => {

if(!this.state.viewmode)
{ 
  //fullscreen
  this.player.presentFullscreenPlayer();
  Orientation.lockToLandscape();

} else {

  //fullscreen_exit
  this.player.dismissFullscreenPlayer()  // you don not call this method
  Orientation.lockToPortrait(); 

}
// you also have to update the state
this.setState({
   viewModel:!viewModel

})

}

对反应本地视频的反应本地方向做出反应的本地布尔条件

1 个答案: