0

我需要知道如何将函数分配给 expo-av Video 组件的 onPress 事件，或者如何使 useRef 引用触发 expo-av Video 组件上的 onPress 事件。

我对 React Native 视频组件有很多要求，我正在尝试找出如何最好地实现它们。主要问题是用户需要能够双击视频并启动动画。我们有一个 Pressable 组件，它在处理双击的视频上呈现。动画效果很好。但问题是视频还需要使用原生控件，而 Pressable 会阻止这些控件。

我有两种策略，但我都无法实现。计划 A，StackOverflow 上的某个人告诉我，expo-av Video 组件具有某种未在其文档中列出的 onPress 功能，而我所要做的就是使用该功能触发双击动画。到目前为止，我已经尝试过 onPress、onTouchEnd、onTouchStart 和 onClick，但所有这些都未定义且未在文档中列出。没有骰子。

计划 B，我可以创建一个 Pressable 组件，该组件在 Video 组件上进行渲染，该组件足够短，不会阻塞本机控件，但足够高，可以捕捉所有其他点击。然后，当用户双击 Pressable 时，动画就会触发并且一切正常。这是我最初提交的解决方案，但我们的 QA 人员说他们需要原生控件才能在第一次印刷时显示。通常，本机控件不可见，并且 expo-av 视频会在任何新闻上显示它们，但 Pressable 会阻止这些新闻，我在文档中找不到任何允许您参考触发 expo-av 新闻事件的内容。我有一个 useRef() 工作，并尝试了 videoRef.current.press、videoRef.current.click 和 videoRef.current.setStatusAsync({ progressUpdateIntervalMillis: 0 })。没有骰子。

综上所述，有谁 A：知道如何为 expo-av Video 组件的 onPress 事件分配一个函数吗？或 B：知道如何让 useRef 引用在 expo-av Video 组件上触发 onPress 事件？或 C：我还没有想到的其他解决方案？

如果有帮助，这里有一些代码片段：

视频实例化：

<Video
          ref={(video) => videoRef.current = video}
          style={[styles.postMedia, { width: videoDimensions.width, height: videoDimensions.height }]}
          source={{ uri: videoUrl }}
          rate={1.0}
          volume={1.0}
          isMuted={isMuted}
          resizeMode={Video.RESIZE_MODE_CONTAIN}
          shouldPlay={shouldPlay || screenIsFocussed && (keyInView === _id)}
          isLooping
          useNativeControls
          onError={(e) => setVideoUrl(`${getS3BaseUrl(video.s3Bucket)}/${video.url}`)} 
          onReadyForDisplay={(response) => {
            const { width, height } = response.naturalSize;
            if (width >= height) return setVideoDimensions({ width: screenWidth, height: screenWidth * height / width });
            if (height > width) return setVideoDimensions({ height: screenWidth, width: screenWidth * width / height });
          }}
        />

handleDoubleTap 函数：

  let lastTap = null;
  const handleDoubleTap = () => {
    const now = Date.now();
    const DOUBLE_PRESS_DELAY = 300;
    if (lastTap && (now - lastTap) < DOUBLE_PRESS_DELAY) {
      toggleLike();
    } else {
      if (videoRef) videoRef.current.setStatusAsync({ progressUpdateIntervalMillis: 0 }); // <-- insert something that actually works here
      lastTap = now;
    }
  };

Pressable 组件实例化：

{(video || image) && (
        <Pressable
          onPress={handleDoubleTap}
          style={video ? {
            ...styles.videoLikePostFromFeedPressable,
            height: IS_IOS ? DEVICE_WIDTH * 0.75 : DEVICE_WIDTH * 0.66,
          } : {
            ...styles.likePostFromFeedPressable,
            height: DEVICE_WIDTH,
          }}
        >
          {renderOverlay()} {/* <-- This is just the animation render, works fine */}
        </Pressable>
      )}
4

0 回答 0