如何避免双击时expo Video组件出现自动调整尺寸的问题

问题根因 #

你开启了useNativeControls属性后，expo-av调用的原生播放器内核默认自带双击区域缩放的交互逻辑，和你自定义的双击点赞手势触发冲突，原生缩放逻辑会强制修改Video组件的渲染尺寸，导致问题出现。

解决方案 #

方案1：不需要原生控制条的场景 #

直接删除代码中的useNativeControls属性即可，原生自带的双击手势会同步失效，不会再触发自动变更尺寸的问题，修改后代码如下：

<Video ref={video}
     source={{uri: item.illustration}}
     style={{flex: 1, aspectRatio: 1}}
     resizeMode="cover"
     shouldPlay={true}
     isLooping={false}
/>

方案2：需要保留原生控制条的场景 #

用手势拦截组件抢占双击事件的响应优先级，不让事件传递到下层Video组件触发原生缩放逻辑，推荐搭配react-native-gesture-handler实现，示例代码如下：

import { TapGestureHandler, GestureDetector } from 'react-native-gesture-handler';

// 组件内逻辑
const doubleTap = Gesture.Tap()
  .numberOfTaps(2)
  .onEnd(() => {
    // 你的点赞逻辑
  });

// 渲染部分
<GestureDetector gesture={doubleTap}>
  <Video ref={video}
       source={{uri: item.illustration}}
       useNativeControls
       style={{flex: 1, aspectRatio: 1}}
       resizeMode="cover"
       shouldPlay={true}
       isLooping={false}
  />
</GestureDetector>

补充优化 #

如果还是偶发尺寸变更，可以把Video组件的样式改为固定宽高适配，避免flex布局被原生逻辑修改：

// 外层容器先获取自身宽高
<View style={{flex:1}} onLayout={(e) => setContainerSize(e.nativeEvent.layout)}>
  <Video 
    {/* 其他属性不变 */}
    style={{width: containerSize.width, height: containerSize.height}}
  />
</View>

内容的提问来源于stack exchange，提问作者Guillaume Theret