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

【问题标题】：Unable to Capture screen shot in react-native-video无法在 react-native-video 中捕获屏幕截图
【发布时间】：2021-08-30 23:30:53
【问题描述】：

react-native 平台：

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);
 };

【问题讨论】：

标签： react-native react-native-video react-native-view-shot

【解决方案1】：

根据github page：

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

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

关于我阅读的常见问题解答：

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

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

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

因此，也许您应该等待Video 的onLoad 事件，然后再进行屏幕截图（另一个建议您删除captureMode 道具的原因）。

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

【讨论】：