依赖

"react-native-view-shot": "3.0.2",

用法

// class component
public fullRef = React.createRef();

public handleCaptureImage = () => {
    this.fullRef
      .capture({ snapshotContentContainer: true, format: 'jpg' })
      .then((uri: string) => {
        console.log('captureRef uri', uri);
      })
      .catch((e) => {
        Toast.info(e.message ?? '生成截图失败');
      })
};

<ScrollView style={{ flex: 1 }}>
    <ViewShot ref={ref => (this.fullRef = ref)}>
     /** 截图区域 */
    </ViewShot>
</ScrollView>

总结

刚开始受网上分享示例影响，ScrollView 组件和 ViewShot 组件顺序用反，导致长截图超出屏幕以外的区域呈黑色无内容，后通过查询官方 issues 和代码案例才找到原因。