diff --git a/README.md b/README.md index 47f8f8d937eb1cdb4b2e60b5a9301a8533f7b512..3384dea4ed3c65d709e274d6fc76530034f713e3 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,17 @@ ## 概述 -该文档旨在帮助开发者在OpenHarmony平台使用React Native OpenHarmony的第三方库，并呈现每个三方库的信息。 +该文档旨在帮助开发者在 OpenHarmony 平台使用 React Native OpenHarmony 的第三方库，并呈现每个三方库的信息。 ## RNOH 三方库总览 | 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | 已发布的最新版本 | 文档链接 | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | -| 1 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | -| 3 | @react-native-picker/picker | 2.5.1 | 是 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | +| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage@1.19.5-0.0.3](https://github.com/react-native-oh-library/async-storage/releases/tag/1.19.5-0.0.3) | [链接](zh-cn/async-storage.md) | +| 2 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | +| 3 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.1](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.1) | [链接](zh-cn/react-native-checkbox.md) | +| 4 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | ## 社区 + +[react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/_sidebar.md b/_sidebar.md index 220d75e1437a6781a89a188066beecda5ac2ddc3..c0190f8a1d961a152915ffd403763cc5eab79eb6 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -3,6 +3,7 @@ - 三方库说明文档合集 + - [@react-native-async-storage/async-storage](zh-cn/async-storage.md) - [@react-native-community/slider](zh-cn/react-native-slider.md) - [@react-native-community/checkbox](zh-cn/react-native-checkbox.md) - [@react-native-picker/picker](zh-cn/picker.md) diff --git a/img/logo.ico b/img/logo.ico index ab7dccabe8e3669251223047e7660c853f5dc5a4..5c125de5d897c1ff5692a656485b3216123dcd89 100644 Binary files a/img/logo.ico and b/img/logo.ico differ diff --git a/img/react.svg b/img/react.svg index 60069956389076bff0f26062b0007a88865249a5..21d9b1b1f107d96e09939eb6e04fa01ff108a19e 100644 --- a/img/react.svg +++ b/img/react.svg @@ -1 +1 @@ -React \ No newline at end of file + \ No newline at end of file diff --git a/index.html b/index.html index 99d1b2444ba8a2e58e0677ed2affbbcd3335b3e0..12591fc60f963686c74621ae2acdd74669d566f7 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,10 @@ - + - @@ -79,6 +78,26 @@ scroll: false, // 启用滚动 height: 300 // 折叠高度 }, + plugins: [ + function (hook, vm) { + // load livere + hook.beforeEach(function(content) { + var comment = "
\n\n----\n" + return content + comment; + }); + + hook.doneEach(function() { + (function(d, s) { + var j, e = d.getElementsByTagName(s)[0]; + if (typeof LivereTower === 'function') { return; } + j = d.createElement(s); + j.src = 'https://cdn-city.livere.com/js/embed.dist.js'; + j.async = true; + e.parentNode.insertBefore(j, e); + })(document, 'script'); + }); + }, + ], } @@ -95,16 +114,11 @@ - - - - - - > + @@ -114,5 +128,7 @@ + + diff --git a/zh-cn/README.md b/zh-cn/README.md index 47f8f8d937eb1cdb4b2e60b5a9301a8533f7b512..3384dea4ed3c65d709e274d6fc76530034f713e3 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -4,13 +4,17 @@ ## 概述 -该文档旨在帮助开发者在OpenHarmony平台使用React Native OpenHarmony的第三方库，并呈现每个三方库的信息。 +该文档旨在帮助开发者在 OpenHarmony 平台使用 React Native OpenHarmony 的第三方库，并呈现每个三方库的信息。 ## RNOH 三方库总览 | 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | 已发布的最新版本 | 文档链接 | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | -| 1 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | -| 3 | @react-native-picker/picker | 2.5.1 | 是 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | +| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage@1.19.5-0.0.3](https://github.com/react-native-oh-library/async-storage/releases/tag/1.19.5-0.0.3) | [链接](zh-cn/async-storage.md) | +| 2 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | +| 3 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.1](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.1) | [链接](zh-cn/react-native-checkbox.md) | +| 4 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | ## 社区 + +[react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/zh-cn/async-storage.md b/zh-cn/async-storage.md new file mode 100644 index 0000000000000000000000000000000000000000..e3d29c239f103199c843991cf04939c627ebb117 --- /dev/null +++ b/zh-cn/async-storage.md @@ -0,0 +1,224 @@ +

+

@react-native-async-storage/async-storage

+

+

+ + Supported platforms + + + License + +

+ +## 安装与使用 + +> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 + +在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 + +```bash +@react-native-oh-library:registry=https://npm.pkg.github.com +//npm.pkg.github.com/:_authToken=TOKEN +``` + +进入到工程目录并输入以下命令： + +```bash +yarn add @react-native-async-storage/async-storage@npm:@react-native-oh-library/async-storage +``` + +或者 + +```bash +npm install @react-native-async-storage/async-storage@npm:@react-native-oh-library/async-storage +``` + +下面的代码展示了这个库的基本使用场景： + +```js +import AsyncStorage from "@react-native-async-storage/async-storage"; + +// Storing data +const storeData = async (value) => { + try { + await AsyncStorage.setItem("my-key", value); + } catch (e) { + // saving error + } +}; + +// Reading data +const getData = async () => { + try { + const value = await AsyncStorage.getItem("my-key"); + if (value !== null) { + // value previously stored + } + } catch (e) { + // error reading value + } +}; +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-slider": "file:../../node_modules/@react-native-async-storage/async-storage/harmony/async_storage.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-slider": "file:../../node_modules/@react-native-async-storage/async-storage/harmony/async-storage" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 SliderPackge + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/rnoh-async-storage/src/main/cpp" ./async-storage) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_async_storage) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "AsyncStoragePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 slider 组件 + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +import type {RNPackageContext, RNPackage} from 'rnoh/ts'; +import {SamplePackage} from 'rnoh-sample-package/ts'; ++ import {AsyncStoragePackage} from 'rnoh-async-storage/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new AsyncStoragePackage(ctx) + ]; +} + +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +| `@react-native-oh-library/async-storage` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | +| ------------------------------------------------ | ----------------------------- | --------------------- | ------------------------------ | --------------------- | +| `1.19.5-0.0.3` | `0.72.5` | `0.72.10` | `4.0.3.601` | `OpenHarmony 4.10.10` | + +## API + +| 名称 | 说明 | 类型 | 是否必填 | 平台 | 鸿蒙支持 | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ---- | -------- | +| `getItem` | Gets a string value for given key. This function can either return a string value for existing key or return null otherwise. | function | No | All | yes | +| `setItem` | Sets a string value for given key. This operation can either modify an existing entry, if it did exist for given key, or add new one otherwise. | function | No | All | yes | +| `mergeItem` | Merges an existing value stored under key, with new value, assuming both values are stringified JSON. | function | No | All | yes | +| `removeItem` | Removes item for a key, invokes (optional) callback once completed. | function | No | All | yes | +| `getAllKeys` | Returns all keys known to your App, for all callers, libraries, etc. Once completed, invokes callback with errors (if any) and array of keys. | function | No | All | yes | +| `multiGet` | Fetches multiple key-value pairs for given array of keys in a batch. Once completed, invokes callback with errors (if any) and results. | function | No | All | yes | +| `multiSet` | Stores multiple key-value pairs in a batch. Once completed, callback with any errors will be called. | function | No | All | yes | +| `multiMerge` | Multiple merging of existing and new values in a batch. Assumes that values are stringified JSON. Once completed, invokes callback with errors (if any). | function | No | All | yes | +| `multiRemove` | Clears multiple key-value entries for given array of keys in a batch. Once completed, invokes a callback with errors (if any). | function | No | All | yes | +| `clear` | Removes whole AsyncStorage data, for all clients, libraries, etc. You probably want to use removeItem or multiRemove to clear only your App's keys. | function | No | All | yes | +| `useAsyncStorage` | The useAsyncStorage returns an object that exposes all methods that allow you to interact with the stored value. | hook | No | All | yes | + +## 遗留问题 + +- [ ] Harmony 的 taskpool 支持类型有限，无法用 taskpool 实现，仅用简单的线程锁替代 +- [ ] Harmony 无法设置指定的存储大小 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/callstack/react-native-slider/blob/main/LICENSE.md) ，请自由地享受和参与开源。 diff --git a/zh-cn/picker.md b/zh-cn/picker.md index 65b73c2c9a6ad610a190fea6602a0cc10b054903..56fc9b8666a547422f514b425bfc3bbe77b1b718 100644 --- a/zh-cn/picker.md +++ b/zh-cn/picker.md @@ -12,7 +12,7 @@ ## 安装与使用 -目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 diff --git a/zh-cn/react-native-slider.md b/zh-cn/react-native-slider.md index b4d156674b4d1756a730ff0bb441485f7f6394e9..e2fed193ef2dd8c0dcd2c563e56632724b46ef5a 100644 --- a/zh-cn/react-native-slider.md +++ b/zh-cn/react-native-slider.md @@ -12,7 +12,7 @@ ## 安装与使用 -目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。