# rntpc_cookies

**Repository Path**: simplelove520/rntpc_cookies

## Basic Information

- **Project Name**: rntpc_cookies
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: br_rnoh0.77
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-31
- **Last Updated**: 2026-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 文档模板：v0.4.2

<p align="center">
  <h1 align="center"> <code>@react-native-cookies/cookies</code> </h1>
</p>

本项目基于 [@react-native-cookies/cookies](https://github.com/react-native-cookies/cookies) 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/cookies`，版本所属关系如下：

| 三方库名称 | 三方库版本（npm地址） | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | 源码地址 |
| ---------- | --------------------- | -------- | ---------- | -------- | ------------ | ------------ | -------- |
| @react-native-ohos/cookies | [~6.3.0](https://www.npmjs.com/package/@react-native-ohos/cookies) | [Gitcode Releases](https://gitcode.com/CPF-RN/rntpc_cookies/releases) | 0.77.* | 否 | API12+ | v6.2.1 | [br_rnoh0.77](https://gitcode.com/CPF-RN/rntpc_cookies/tree/br_rnoh0.77) |

## 简介

`cookies` 用于 React Native 应用中管理 Cookie，提供按 URL 读取、设置、删除 Cookie，以及清除全部或会话 Cookie 等能力。

使用本库时需要配合 `react-native-webview` 使用，具体请参考 [react-native-webview](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/react-native-webview.md)。

## 下载安装

进入到工程目录并输入以下命令：

**npm**

```bash
npm install @react-native-ohos/cookies
```

**yarn**

```bash
yarn add @react-native-ohos/cookies
```

## Link

|                                      | 是否支持autolink | RN框架版本 |
|--------------------------------------|------------------|------------|
| ~6.3.0                               | No               | 0.77       |

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

ManualLink: 此步骤为手动配置原生依赖项的指导。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。

### 1. Overrides RN SDK

为了让工程依赖同一个版本的 RN SDK，需要在工程根目录的 `oh-package.json5` 添加 overrides 字段，指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号，也可以是一个模糊版本，还可以是本地存在的 HAR 包或源码目录。

关于该字段的作用请阅读[官方说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides)

```json
{
  "overrides": {
    "@rnoh/react-native-openharmony": "./react_native_openharmony"
  }
}
```

### 2. 引入原生端代码

目前有两种方法：

- 通过 har 包引入；
- 直接链接源码。

方法一：通过 har 包引入（推荐）

> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。

打开 `entry/oh-package.json5`，添加以下依赖

```json
"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/cookies": "file:../../node_modules/@react-native-ohos/cookies/harmony/rn_cookies.har"
}
```

点击右上角的 `sync` 按钮

或者在命令行终端执行：

```bash
cd entry
ohpm install
```

方法二：直接链接源码

> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitcode.com/CPF-RN/usage-docs/blob/master/zh-cn/link-source-code.md)

### 3. 配置 CMakeLists 和引入 CookiesPackage

打开 `entry/src/main/cpp/CMakeLists.txt`，添加：

```diff
 project(rnapp)
 cmake_minimum_required(VERSION 3.4.1)
 set(CMAKE_SKIP_BUILD_RPATH TRUE)
 set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
 set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
 set(RNOH_CPP_DIR "${OH_MODULES}/rnoh/src/main/cpp")
 set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
 add_subdirectory("${RNOH_CPP_DIR}" ./rn)

 # RNOH_BEGIN: manual_package_linking_1
 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+add_subdirectory("${OH_MODULES}/@react-native-ohos/cookies/src/main/cpp" ./rn_cookies)
 # RNOH_END: manual_package_linking_1

 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

 add_library(rnoh_app SHARED
     ${GENERATED_CPP_FILES}
     "./PackageProvider.cpp"
     "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
 )
 target_link_libraries(rnoh_app PUBLIC rnoh)

 # RNOH_BEGIN: manual_package_linking_2
 target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+target_link_libraries(rnoh_app PUBLIC rnoh_cookies)
 # RNOH_END: manual_package_linking_2
```

打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：

```diff
 #include "RNOH/PackageProvider.h"
 #include "SamplePackage.h"
+#include "CookiesPackage.h"

 using namespace rnoh;

 std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
     return {
       std::make_shared<SamplePackage>(ctx),
+      std::make_shared<CookiesPackage>(ctx),
     };
 }
```

### 4. 在 ArkTs 侧引入 CookiesPackage

打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：

```diff
 import {CookiesPackage} from '@react-native-ohos/cookies/ts';

 export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
   return [
     new CookiesPackage(ctx)
   ];
 }
```

### 运行

点击右上角的 `sync` 按钮

或者在命令行终端执行：

```bash
cd entry
ohpm install
```

然后编译、运行即可。

## 约束与限制

### 兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

### 权限要求

- 本库无特殊权限要求。
- 若配合 `react-native-webview` 访问网络页面，应用需要申请网络权限。

在 `entry/src/main/module.json5` 中添加：

```json
requestPermissions: [
  {
    "name": "ohos.permission.INTERNET",
  },
],
```

### 编译运行API要求

> [!TIP] 当前三方库所有版本均已实现版本隔离，支持在 `API12+` 工程编译，及 `API12+` ROM运行。

## 使用示例

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名不变。

```javascript
import React, { useState, useRef } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from "react-native";
import CookieManager from "@react-native-cookies/cookies";
import { WebView } from "react-native-webview";

export interface Cookie {
  name: string;
  value: string;
  path?: string;
  domain?: string;
  version?: string;
  expires?: string;
  secure?: boolean;
  httpOnly?: boolean;
}

export interface Cookies {
  [key: string]: Cookie;
}

export default function CookiesPage() {
  const httpUrl = "https://www.baidu.com";
  const [result, setResult] = useState("请点击按钮，进行操作");
  const webViewRef = useRef(null);

  return (
    <View style={styles.container}>
      <View style={styles.pageArea}>
        <WebView source={{ uri: httpUrl }} ref={webViewRef} />
      </View>

      <ScrollView style={styles.resultArea}>
        <Text>{result}</Text>
      </ScrollView>

      <TouchableOpacity
        style={styles.button}
        onPress={async () => {
          let cookieResult = await CookieManager.clearAll(true);
          let result = cookieResult
            ? "清除所有cookie成功"
            : "清除所有cookie失败";
          setResult(result + "");
        }}
      >
        <Text>clearAll()【清除所有cookie】</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={async () => {
          let cookieResult = await CookieManager.get(httpUrl, true);
          setResult(JSON.stringify(cookieResult));
        }}
      >
        <Text>get()【根据url获取cookie】</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={async () => {
          let curCookie: Cookie = { name: "myAddCookie", value: "myNewCookie" };
          let cookieResult = await CookieManager.set(httpUrl, curCookie, true);
          let result = cookieResult
            ? "根据url设置cookie成功"
            : "根据url设置cookie失败";
          setResult(result);
        }}
      >
        <Text>set()【根据url设置cookie】</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={async () => {
          let cookieResult = await CookieManager.clearByName(
            httpUrl,
            "myAddCookie",
            true
          );
          let result = cookieResult
            ? "根据名称删除cookie成功"
            : "根据名称删除cookie失败";
          setResult(result);
        }}
      >
        <Text>clearByName()【根据名称删除cookie】</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.button}
        onPress={async () => {
          let cookieResult = await CookieManager.removeSessionCookies();
          let result = cookieResult
            ? "清除会话cookie成功"
            : "清除会话cookie失败";
          setResult(result);
        }}
      >
        <Text>removeSessionCookies()【清除会话cookie】</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
    alignItems: "center",
  },
  pageArea: {
    width: "95%",
    height: 80,
  },
  resultArea: {
    width: "95%",
    borderWidth: 2,
    borderColor: "gray",
    borderRadius: 10,
    marginTop: 5,
  },
  button: {
    backgroundColor: "#FF0000",
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 24,
    alignItems: "center",
    justifyContent: "center",
    elevation: 4,
    width: "80%",
    marginTop: 5,
  },
});
```

## 接口说明

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "OpenHarmony平台支持"列为 yes 表示 OpenHarmony平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### API

| 名称 | 类型 | 参数类型 | 返回值 | 必填 | 平台 | OpenHarmony平台支持 | 描述 |
|------|------|----------|--------|------|------|-------------------|------|
| clearAll | function | useWebKit?: boolean | Promise&lt;boolean&gt; | No | iOS, Android | yes | 清除所有 Cookie。 |
| get | function | url: string, useWebKit?: boolean | Promise&lt;Cookies&gt; | No | iOS, Android | yes | 根据 URL 获取 Cookie。 |
| set | function | url: string, cookie: Cookie, useWebKit?: boolean | Promise&lt;boolean&gt; | No | iOS, Android | yes | 根据 URL 设置 Cookie。 |
| clearByName | function | url: string, name: string, useWebKit?: boolean | Promise&lt;boolean&gt; | No | iOS | yes | 根据 URL 和名称删除 Cookie。 |
| flush | function | / | Promise&lt;void&gt; | No | Android | no | 刷新 Cookie 存储。 |
| removeSessionCookies | function | / | Promise&lt;boolean&gt; | No | iOS, Android | yes | 清除会话 Cookie。 |
| getAll | function | useWebKit?: boolean | Promise&lt;Cookies&gt; | No | iOS | no | 获取所有 Cookie。 |
| setFromResponse | function | url: string, cookie: string | Promise&lt;boolean&gt; | No | iOS | no | 根据响应头设置 Cookie。 |
| getFromResponse | function | url: string | Promise&lt;Cookies&gt; | No | iOS | no | 根据响应头获取 Cookie。 |

## 遗留问题

- `getAll`、`setFromResponse`、`getFromResponse` 在 iOS 上可用、Android 上不可用；`flush` 仅 Android 可用、iOS 不可用，OpenHarmony 不支持（鸿蒙侧无持久化屏障 API，`CookieManager.flush()` 在鸿蒙平台为 no-op）。问题：[issue#1](https://github.com/react-native-oh-library/react-native-cookies/issues/1)

## 其他

无

## 目录结构

````
/rntpc_cookies  # 项目根目录
├── harmony
│   └── rn_cookies             # HarmonyOS 适配核心代码
│       ├── Index.ets          # HarmonyOS 适配入口
│       ├── ts.ets             # TS 导出入口
│       └── src/main
│           ├── cpp            # C++ Turbo Module 与 Package
│           │   ├── CMakeLists.txt
│           │   ├── CookiesPackage.h
│           │   ├── CookiesTurboModule.h
│           │   ├── CookiesTurboModule.cpp
│           │   └── generated  # Codegen 生成的 Turbo Module 代码
│           └── ets            # ArkTS 适配实现
│               ├── CookiesPackage.ts
│               ├── CookiesModule.ts
│               ├── Logger.ets
│               └── generated  # Codegen 生成的 ArkTS 代码
├── src
│   └── NativeRTNCookies.tsx   # RN Codegen 规格
├── index.js                   # JS API 入口
└── index.d.ts                 # TypeScript 类型定义
````
## 贡献代码

使用过程中发现任何问题都可以提交 [Issue](https://gitcode.com/CPF-RN/rntpc_cookies/issues)，当然，也非常欢迎提交 [PR](https://gitcode.com/CPF-RN/rntpc_cookies/pulls)。

## 开源协议

本项目基于 [The MIT License (MIT)](https://github.com/react-native-cookies/cookies/blob/master/LICENSE)，请自由地享受和参与开源。