React Native Expo Video av-expo

Question

我正在嘗試使用av-expo.

1. 按下按鈕時，視頻組件以全屏模式呈現，縱向。

2. 從全屏退出時，視頻組件被隱藏。

我無法：

• 以全屏模式顯示

• 從全屏模式檢測退出事件。

 function showVideo(){
    <Video
      source={{ uri:'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
      resizeMode="cover"
      useNativeControls
      style={{ width: 300, height: 300 }}/>
    }

  export default function App(){
    const[state,setState]=useState(0)
    return(
      <View>
        {state ? showVideo() : null}
        <Button onPress={=>(setState(1)}/>
        <View>
      )
  }

有人能幫幫我嗎？

Answer 1

由於您使用av-expo ； 有適合您的全屏API。

組件的 ref 上提供了以下方法：

• videoRef.presentFullscreenPlayer(); 使用它以全屏模式呈現視頻。
• videoRef.dismissFullscreenPlayer()

and use onPlaybackStatusUpdate , a function to be called regularly with the onFullscreenUpdate , a function to be called when the state of the native iOS fullscreen view changes (controlled via the presentFullscreenPlayer() and dismissFullscreenPlayer() methods on the Video's ref.

export default class App extends React. Component{
  _videoRef;

  showVideoInFullscreen = async () => {
    // PlaybackStatus https://docs.expo.io/versions/latest/sdk/av/
    const status = await this._videoRef.presentFullscreenPlayer();
    console.log(status)
  }

  dismissVideoFromFullscreen = async () => {
    const status = await this._videoRef.dismissFullscreenPlayer();
    console.log(status);
  }

  onFullscreenUpdate = ({fullscreenUpdate, status}) => {
    console.log(fullscreenUpdate, status)
    switch (fullscreenUpdate) {
      case Video.FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT: 
        console.log(' the fullscreen player is about to present');
        break;
      case Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT: 
        console.log('the fullscreen player just finished presenting');
        break;
      case Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS: 
        console.log('the fullscreen player is about to dismiss');
        break;
      case Video.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS: 
        console.log('the fullscreen player just finished dismissing');
    }
  }

  render () {
   return (
       <View style={styles.container}>
           <Video
               ref={(ref) => (this._videoRef = ref)}
               source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
               resizeMode="cover"
               useNativeControls
               onFullscreenUpdate={this.onFullscreenUpdate}
               style={{ width: 300, height: 300 }}
           />
           <Button
               title={'show video'}
               onPress={() => {
                   this.showVideoInFullscreen();
               }}
           />
       </View>
   );
  }
}

output

the fullscreen player is about to present
the fullscreen player just finished presenting
the fullscreen player is about to dismiss
the fullscreen player just finished dismissing