如何在 expo av useNativeControls 上触发事件，特别是 Close (X)

Question

我正在复制您在 Netflix 或任何流媒体应用程序中找到的功能。当我点击视频缩略图时，它会全屏和横向打开视频。 <- This is working. When I navigate back from the video player, it resets the UI to protrait. That is working as well. My problem is, when I close the video with the (X), it exists fullscreen but it remains on that navigation view until I hit Back on the header. That seems rather unnecessary since there is nothing else to do there. I would prefer it if I could attach a

navigate.goBack()

到 (X) 控件，这样它不仅退出全屏，而且还返回到它原来的屏幕

//This is how I get my rotation when the video player loads and how ti resets when the user leaves that screen. Not sure if you need this
useEffect(() => {

    navigation.addListener("focus", () => {
        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
    });

    navigation.addListener("blur", () => {
        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
    });

}, [navigation]);


<Video
    ref={videoRef}
    source={{ uri: `https://judopedia.wiki/assets/videos/${videodata.url}` }}
    resizeMode="contain"
    shouldPlay
    isLooping
    style={styles.video}
    useNativeControls
    // 👇 This plays the video on fullscreen 
    onLoad={()=>{
        videoRef?.current?.presentFullscreenPlayer();
    }}
    // 👇 This is what I am hoping to do while the video is on fullscreen (if it existed)
    onClose={() => {
        navigation.goBack();
    }}
/>

这是我指的X。

这就是我现在点击它时发生的情况。我想让它回到原来的地方（不包括原始截图）

Answer 1

好吧，我想出了一个解决方案，这可能是正确的，也可能不是。因此，请随意挑战它，如果发布更好的解决方案，我将更改我的答案

这是整个组件

import { StyleSheet, View, Animated } from 'react-native'
import React, {useRef, useEffect} from 'react'
import { Video} from 'expo-av';
import * as ScreenOrientation from "expo-screen-orientation";

//I save a constructor for the Anumated value in a constant av
const av = new Animated.Value(0);
av.addListener(() => {return});

//Then I added a listener to that Animation which I named fullscreenchange
av.addListener("fullscreenchange", () => {});



const VideoPlayerComponent = ({route, navigation}) => {

  const videodata = route.params.data;

  const videoRef = useRef(null);

  //this observer function fires on every change of the event that 
  // I am listening for
  const onFullscreenUpdate = (event) => {
    console.log(event);
    // comment this part out first until you find out which event order
    // you need to target. Once you find out, you can change that number
    // an uncomment it
    if (event.fullscreenUpdate === 3) {
      navigation.goBack();
    }
  }


  useEffect(() => {

    //This stuff is what makes my video go landscape and back to portrait whenever it has focus or not
    navigation.addListener("focus", () => {
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
    });

    navigation.addListener("blur", () => {
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
    });

  }, [navigation]);

  return (
    <View style={styles.mainplayerview}>
      <View style={styles.videoitems}>
        <Video
          ref={videoRef}
          source={{ uri: `https://judopedia.wiki/assets/videos/${videodata.url}` }}
          resizeMode="contain"
          shouldPlay
          isLooping
          style={styles.video}
          useNativeControls
          //This makes it go to full screen when it loads
          onLoad={()=>{
            videoRef?.current?.presentFullscreenPlayer();
            }
          }
          //And finally I'm passing that observer I made earlier (listeners) to watch for every screen update
          onFullscreenUpdate={onFullscreenUpdate}
        />
      </View>
    </View>
  )
}

export default VideoPlayerComponent

现在，检查您的控制台，注意您应该有一系列对象随着视频的每次状态变化而更新。对我来说，它给了我 4。如果您打开控制台，您可以在每次视频视图状态发生变化时看到这些对象注册。值得注意的是，如果您暂停或提高音量，它不会注册。如果是这样，这个解决方案将毫无价值。所以，因为它只注册了：

1. 对象 0 - 当它进入景观时
2. 对象 1 - 当它进入全屏时 当我按下 X 后
3. 对象 2 - 当它返回常规视图时
4. 对象 3 - 当它回到纵向时

这使我能够针对该特定状态并针对该状态执行某些操作。对我来说，这是最后一步（对象 3）

我回到我的观察者功能并瞄准第三个事件（实际上是第四个），并告诉它导航回我来自的地方。对你来说，它可以是你想要它做的任何事情

if (event.fullscreenUpdate === 3) {
   navigation.goBack();
}

希望有帮助。到目前为止，没有任何错误