无法在 react-native-video 中捕获屏幕截图

如何解决无法在 react-native-video 中捕获屏幕截图

反应原生平台：

iOS
安卓

问题：

我正在尝试捕获屏幕。当视频暂停时。但是每当我尝试从视频中捕获图像时。它的投掷战无法捕捉到；

可能的未处理的承诺拒绝（ID：25）：错误：内容大小不得为零或负数。得到：(0,410)

库版本：

"react-native-video": "^5.1.0-alpha8","react-native-view-shot": "^3.1.2",

代码：

 const viewShotRef = useRef(null);
 const [uri,setUri] = useState('');

<ViewShot
      style={[styles.imageViewerStyleVideo,{height: 410}]}
      ref={viewShotRef}
      captureMode="continuous"
      options={{format: 'jpg',quality: 0.9}}>
         <Video
             ref={(p) => {
               videoRef = p;
         }}
         paused={isPaused}
         source={getimageSource(caseViewerVideo)}
         resizeMode={'contain'}
         selectedVideoTrack={'auto'}
         style={styles.fullScreenMode}
         controls={true}
         playInBackground={false}
         playWhenInactive={false}
      />
</ViewShot>

<pressable
        style={{
          width: 40,height: 40,borderWidth: 1,borderRadius: 20,position: 'absolute',top: 260,right: 80,borderColor: Colors.pencil,backgroundColor: Colors.shadow,}}
        onPress={() => onCapture()}
 />

const onCapture = async () => {
    const uri = await viewShotRef.current.capture();
    setUri(uri);
    console.log(uri);
 };

解决方法

根据github page：

“连续”是实验性的，这将连续捕获大量图像。对于非常具体的用例。

从您的代码中，我看到您有一个 Pressable 来制作屏幕截图。我建议您完全删除 captureMode 道具。

在常见问题上我读到：

获取“内容大小不得为零或负数。”

确保您不要立即快照，您至少需要等待有第一个 onLayout 事件，或者在超时之后，否则视图可能还没有准备好。（等待也应该是安全的如果您有图像 onLoad）。如果问题仍然存在，请使确保您的视图实际上具有宽度和高度 > 0。

或者，您可以使用 ViewShot 组件来等待第一个 onLayout。

所以也许你应该在制作屏幕截图之前等待 Video 的 onLoad 事件（另一个建议你删除 captureMode 道具的原因）。

或者，您可以使用 captureRef(view,options) 或 captureScreen() 代替 capture()。