# ReactNativeViewShotToSave

**Repository Path**: scenario-samples/react-native-view-shot-to-save

## Basic Information

- **Project Name**: ReactNativeViewShotToSave
- **Description**: 在应用开发中，需要获取屏幕截图，保存到图库后获取到图片地址，以便做后续操作。 本示例使用react-native-view-shot 和@react-native-camera-roll/camera-roll 是实现截图保存图库。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-05
- **Last Updated**: 2025-12-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RN截图保存图库示例

## 场景介绍

在应用开发中，需要获取屏幕截图，保存到图库后获取到图片地址，以便做后续操作。

本示例使用[react-native-view-shot](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-view-shot.md)
和[@react-native-camera-roll/camera-roll](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-cameraroll.md)
是实现截图保存图库。

## 效果预览

<img src="screenshots/viewshot.gif" width="200">

## 实现思路

1. 通过captureRef或captureScreen获取路径，使用captureRef需要将ref和组件绑定。

   ```
   const view = React.useRef<View>(null);

   <View ref={view} collapsable={false} style={[styles.white]}>
      <Text style={styles.text}>Hello OpenHarmony</Text>
      <Text style={styles.text}>Hello HarmonyOS</Text>
      <Text style={styles.text}>Hello HarmonyOS Next.</Text>
      
      <ViewShot
         ref={ref}
         style={styles.white}
         onCapture={onCapture}
         onCaptureFailure={onCaptureFailure}
         captureMode="mount">
         <Text style={styles.text}>Hello World</Text>
      </ViewShot>
   </View>

   ```

2. 通过CameraRoll.saveAsset将获取的路径保存到图库。

   ```
   CameraRoll.saveAsset(tag, options)
      .then(res => {
      console.log('res-----', res);
      })
      .catch(err => {
      console.error('saveAsset err----', err);
      });
   ```

## 约束与限制

- 本示例支持API Version 17 Release及以上版本。
- 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。
- 本示例使用0.72.86版本RNOH

## 工程目录

```
ReactNativeViewShotToSave                        // RN工程
├──harmony                                       // harmony工程
│  ├──entry/src/main/cpp                         // native相关配置
│  │  ├──generated                               // codegen自动生成的桥接代码
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src/main/ets
│  │  ├──entryability
│  │  │  └──EntryAbility.ets
│  │  ├──pages
│  │  │  └──Index.ets                            // harmony侧入口
│  │  └──RNPackagesFactory.ets
│  └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录
├──App.tsx                                       // 截图保存图库实现
├──index.js                                      // 入口文件
└──metro.config.js                               // 打包配置
```

## 参考文档
[RNOH使用文档](https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md)