# ReactNativeSaveDocToUserDir

**Repository Path**: scenario-samples/react-native-save-doc-to-user-dir

## Basic Information

- **Project Name**: ReactNativeSaveDocToUserDir
- **Description**: 在应用开发中，有时需要将文件保存到用户目录中以便用户直接查看，本示例通过TurboModule借助HarmonyOS的DocumentViewPicker实现将文件保存到用户目录的功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-06
- **Last Updated**: 2026-02-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 保存文件至用户目录

## 场景介绍

在应用开发中，有时需要将文件保存到用户目录中以便用户直接查看，本示例通过TurboModule借助HarmonyOS的[DocumentViewPicker](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-file-picker#documentviewpicker)实现将文件保存到用户目录的功能。

## 效果预览

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

## 实现思路

1. 编写、配置TurboModule。

```typescript
import {TurboModule, TurboModuleRegistry} from 'react-native';

// 使用自定义的TurboModules
export interface Spec extends TurboModule {
  save(): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('NativeTools');
```
根据以上代码，使用codegen工具自动生成桥接代码，详细步骤可参考[ArkTS TurboModule的实现](https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/TurboModule.md#arkts-turbomodule%E7%9A%84%E5%AE%9E%E7%8E%B0)。
2. ArkTS侧核心方法实现。

```typescript
import { UITurboModule, UITurboModuleContext } from '@rnoh/react-native-openharmony/ts';
import { TM } from '@rnoh/react-native-openharmony/generated/ts';
import { common } from '@kit.AbilityKit';

import { picker } from '@kit.CoreFileKit';
import { fileIo as fs } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';

export class ToolsModule extends UITurboModule implements TM.NativeTools.Spec {
  private UIContext: UIContext;

  constructor(ctx: UITurboModuleContext) {
    super(ctx)
    const mainWindow = ctx.uiAbilityContext.windowStage.getMainWindowSync()
    this.UIContext = mainWindow.getUIContext()
  }

  save() {
    let context = this.UIContext.getHostContext() as common.UIAbilityContext;
    const documentViewPicker = new picker.DocumentViewPicker(context);
    const documentSaveOptions = new picker.DocumentSaveOptions();
    documentSaveOptions.newFileNames = ['test.txt'];
    documentViewPicker.save(documentSaveOptions).then((documentSaveResult: Array<string>) => {
      const uri = documentSaveResult[0];
      const file = fs.openSync(uri, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
      fs.writeSync(file.fd, 'your file content');
      fs.closeSync(file.fd);

      promptAction.openToast({message: '保存成功'})
    }).catch((err: BusinessError) => {
      console.error(`Invoke documentViewPicker.save failed, code is ${err.code}, message is ${err.message}`);
    })
  }
}
```

## 约束与限制

- 本示例支持API Version 17 Release及以上版本。
- 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。
- 本示例使用0.72.86版本RNOH。
- RN工程安装依赖前请先在NativeTools目录下执行`npm pack`命令生成依赖包。

## 工程目录

```
ReactNativeSaveDocToUserDir                      // 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侧入口
│  │  ├──turbomodule                             // TurboModule的ArkTS侧实现
│  │  └──RNPackagesFactory.ets
│  └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录
├──NativeModules                                 // 自定义TurboModule模块
├──App.tsx                                       // TurboModule方法调用
├──index.js                                      // 入口文件
├──metro.config.js                               // 打包配置
```
## 参考文档
[自定义TurboModule的实现](https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/TurboModule.md#%E8%87%AA%E5%AE%9A%E4%B9%89turbomodule%E7%9A%84%E5%AE%9E%E7%8E%B0)

[保存用户文件-保存文档类文件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/save-user-file#保存文档类文件)