diff --git a/_sidebar.md b/_sidebar.md index c9e42e32c71f908eea7c83f2debe0d2411b23fca..552bf43ba20a50b04f5be6446aef42a71892554a 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -3,6 +3,7 @@ - [首页](/zh-cn/README.md) - [贡献文档](/zh-cn/contribute.md) - [文档模板](/zh-cn/model.md) +- [链接源码](/zh-cn/link-source-code.md) - 三方库说明文档合集 - RN原生库 - [@react-native-async-storage/async-storage](/zh-cn/react-native-async-storage-async-storage.md) diff --git a/zh-cn/link-source-code.md b/zh-cn/link-source-code.md new file mode 100644 index 0000000000000000000000000000000000000000..f4f7f34ba9cb4ca4c2fa70c1923d61a3e4bb701a --- /dev/null +++ b/zh-cn/link-source-code.md @@ -0,0 +1,44 @@ +### 引入原生端代码 + +#### 直接链接源码情况说明 + +目前 DevEco Studio 不支持通过源码引入外部 module，我们推荐使用 har 包的方式引入，如需要直接链接源码，请按照以下步骤操作，将源码通过操作改成 harmony 工程的内部模块。 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +把`/node_modules/@react-native-oh-tpl//harmony/`目录下的源码``复制到`harmony`工程根目录下 + +在`harmony`工程根目录的 `build-profile.template.json5`（若存在）和`build-profile.json5` 添加以下模块 + +```json +modules:[ + ... + { + name: '', + srcPath: './', + } + //提示：{ + // name: 'safe_area', + // srcPath: './safe_area', + // } +] +``` + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/": "file:../" + // 提示: "@react-native-oh-tpl/react-native-safe-area-context": "file:../safe_area" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` diff --git a/zh-cn/lottie-react-native.md b/zh-cn/lottie-react-native.md index b3b85b9dfe7e2b5e071fcab76625e685a29e4d7c..c36b2fbd3b492e837f889344399cd041f4337fbd 100644 --- a/zh-cn/lottie-react-native.md +++ b/zh-cn/lottie-react-native.md @@ -86,24 +86,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-lottie": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 LottieAnimationViewPackage diff --git a/zh-cn/model.md b/zh-cn/model.md index 95a60250870652ace884dbed71ff390c8d789449..f8f24ee91bc54c9e94e3b5ffbd69fc1a4e26a9ce 100644 --- a/zh-cn/model.md +++ b/zh-cn/model.md @@ -127,44 +127,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -把`tester/node_modules/@react-native-oh-tpl//harmony/`目录下的源码``复制到`harmony`工程根目录下 - -在`harmony`工程根目录的 `build-profile.template.json5`（若存在）和`build-profile.json5` 添加以下模块 - -```json -modules:[ - ... - { - name: '', - srcPath: './', - } - //提示：{ - // name: 'safe_area', - // srcPath: './safe_area', - // } （删除） -] -``` - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/": "file:../" - // 提示: "@react-native-oh-tpl/react-native-safe-area-context": "file:../safe_area"（删除） - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 xxxPackge diff --git a/zh-cn/react-native-MJRefresh.md b/zh-cn/react-native-MJRefresh.md index 6c31e339092bb55550fb672a2c71f1db139c0338..09351a7c167b0d5486ec464af2f7a42c82e243ea 100644 --- a/zh-cn/react-native-MJRefresh.md +++ b/zh-cn/react-native-MJRefresh.md @@ -134,24 +134,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-mjrefresh": "file:../../node_modules/@react-native-oh-tpl/react-native-mjrefresh/harmony/mjrefresh" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 MJRefreshPackge @@ -201,7 +184,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 在 ArkTs 侧引入 MJRefresh组件 +### 在 ArkTs 侧引入 MJRefresh 组件 找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： diff --git a/zh-cn/react-native-SmartRefreshLayout.md b/zh-cn/react-native-SmartRefreshLayout.md index 4e63e1f486cd1648282b65239b94c50c06895e92..f54712ec07152cda4a88ead3e3298b99402980f0 100644 --- a/zh-cn/react-native-SmartRefreshLayout.md +++ b/zh-cn/react-native-SmartRefreshLayout.md @@ -214,24 +214,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-smart-refresh-layout": "file:../../node_modules/@react-native-oh-tpl/react-native-smartrefreshlayout/harmony/smart_refresh_layout" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 SmartRefreshLayoutPackage diff --git a/zh-cn/react-native-async-storage-async-storage.md b/zh-cn/react-native-async-storage-async-storage.md index ddab4f8c70d9d8a97fbf95639c156bfa59cd514f..f5599bbd6135bdae0190bfe929b09fa2eec44e99 100644 --- a/zh-cn/react-native-async-storage-async-storage.md +++ b/zh-cn/react-native-async-storage-async-storage.md @@ -105,24 +105,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-async-storage": "file:../../node_modules/@react-native-oh-tpl/async-storage/harmony/async-storage" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 AsynStoragePackge diff --git a/zh-cn/react-native-blob-util.md b/zh-cn/react-native-blob-util.md index 5949959463624c46598320b675770b1af1fc3237..ec8e6cc3e03f44ce432a9f70fea520dca09158ad 100644 --- a/zh-cn/react-native-blob-util.md +++ b/zh-cn/react-native-blob-util.md @@ -13,7 +13,6 @@

- > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-blob-util) ## 安装与使用 @@ -22,7 +21,7 @@ 进入到工程目录并输入以下命令： ->[!TIP] # 处替换为 tgz 包的路径 +> [!TIP] # 处替换为 tgz 包的路径 @@ -42,303 +41,372 @@ yarn add @react-native-oh-tpl/react-native-blob-util@file:# 下面的代码展示了这个库的基本使用场景： ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] 使用时 import 的库名不变。 ```js -import React, { useState } from 'react'; -import { ScrollView, StyleSheet, Button, View, Text,NativeEventEmitter} from 'react-native'; -import ReactNativeBlobUtil from 'react-native-blob-util'; +import React, { useState } from "react"; +import { + ScrollView, + StyleSheet, + Button, + View, + Text, + NativeEventEmitter, +} from "react-native"; +import ReactNativeBlobUtil from "react-native-blob-util"; export default function BlobUtilDemo() { - const [result, setResult] = useState(null); - const [mkdirParam, setMkdirParam] = useState(''); - - const createFile = async () => { - await ReactNativeBlobUtil.fs.createFile(result + "/text.txt", '123456', 'utf8'); - } - - const ls = async () => { - await ReactNativeBlobUtil.fs.ls(ReactNativeBlobUtil.fs.dirs.CacheDir); - } - - const createFileASCII = async () => { - await ReactNativeBlobUtil.fs.createFile(result + "/text.txt", [102, 111, 111], "ascii"); - } - - const unlink = () => { - ReactNativeBlobUtil.fs.unlink(result + '/text.txt') - } - - const getConstants = () => { - let obj = ReactNativeBlobUtil.fs.dirs.CacheDir; - setResult(obj) - } - - const writeFile = () => { - ReactNativeBlobUtil.fs.writeFile(result + "/text.txt", "Try to write str", 'utf8') - } - - const writeStream = () => { - ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false) - } - - const writeArrayChunk = () => { - ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "ascii", false).then(reactNativeBlobUtilWriteStream => { - reactNativeBlobUtilWriteStream.encoding = 'ascii' - reactNativeBlobUtilWriteStream.write(['101', '32', '97']) - }) - } - - const writeChunk = () => { - ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false).then(reactNativeBlobUtilWriteStream => { - reactNativeBlobUtilWriteStream.write('Zm9vIChXcml0ZSBCYXNlNjQpMQ==') - }) - } - - const closeStream = () => { - ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false).then(reactNativeBlobUtilWriteStream => { - setTimeout(() => { - reactNativeBlobUtilWriteStream.close(); - }, 1000) - }) - } - const readStream = () => { - ReactNativeBlobUtil.fs.readStream(result + '/text.txt', "utf8", 4000, 200) - } - - const mkdir = () => { - ReactNativeBlobUtil.fs.mkdir(ReactNativeBlobUtil.fs.dirs.DocumentDir + '/' + mkdirParam) - }; - - const stat = () => { - ReactNativeBlobUtil.fs.stat(result + "/text.txt") - } - - const copyFileToCache = () => { - ReactNativeBlobUtil.fs.cp(result + "/text.txt", result + "/text1.txt") - } - - const writeFileArray = () => { - ReactNativeBlobUtil.fs.writeFile(result + "/text.txt", [102, 111, 111], "ascii") - } - - const exists = () => { - ReactNativeBlobUtil.fs.exists(result + "/text.txt") - } - - const lstat = () => { - ReactNativeBlobUtil.fs.lstat(result + "/text.txt") - } - - const mv = () => { - ReactNativeBlobUtil.fs.mv(result + "/text.txt", result + "/text1.txt") - } - - const hash = () => { - ReactNativeBlobUtil.fs.hash(result + "/text.txt", "md5") - } - - const readFile = () => { - ReactNativeBlobUtil.fs.readFile(result + "/text.txt", 'utf8', 4000) - } - - const slice = () => { - ReactNativeBlobUtil.fs.slice(result + "/text.txt", result + "/text1.txt", 2, 5) - } - - const df = () => { - ReactNativeBlobUtil.fs.df() - } - - const addListener = () => { - let obj = 'addListener是空实现'; - setResult(obj) - } - - const removeListeners = () => { - let obj = 'removeListeners是空实现'; - setResult(obj) - } - - const emitExpiredEvent = () => { - let obj = 'emitExpiredEvent是空实现,三方库没有调用'; - setResult(obj) - } - - - return ( - - - BlobUtil - - - - {result} - - - - - - BlobUtilTurboModule.getConstants() - - - - BlobUtilTurboModule.createFile() - - - - BlobUtilTurboModule.unlink() - - - - BlobUtilTurboModule.copyFileToCache() - - - - BlobUtilTurboModule.writeFile() - - - - BlobUtilTurboModule.stat() - - - - BlobUtilTurboModule.mkdir() - - - - BlobUtilTurboModule.writeStream() - - - - BlobUtilTurboModule.ls() - - - - BlobUtilTurboModule.createFileASCII() - - - - BlobUtilTurboModule.writeFileArray() - - - - BlobUtilTurboModule.exists() - - - - BlobUtilTurboModule.lstat() - - - - BlobUtilTurboModule.hash() - - - - BlobUtilTurboModule.readFile() - - - - BlobUtilTurboModule.slice() - - - - BlobUtilTurboModule.df() - - - - BlobUtilTurboModule.closeStream() - - - - BlobUtilTurboModule.writeArrayChunk() - - - - BlobUtilTurboModule.writeChunk() - - - - BlobUtilTurboModule.readStream() - - - - BlobUtilTurboModule.mv() - - - - addListener() - - - - removeListeners() - - - - emitExpiredEvent() - - - - + const [result, setResult] = (useState < string) | (null > null); + const [mkdirParam, setMkdirParam] = useState(""); + + const createFile = async () => { + await ReactNativeBlobUtil.fs.createFile( + result + "/text.txt", + "123456", + "utf8" + ); + }; + + const ls = async () => { + await ReactNativeBlobUtil.fs.ls(ReactNativeBlobUtil.fs.dirs.CacheDir); + }; + + const createFileASCII = async () => { + await ReactNativeBlobUtil.fs.createFile( + result + "/text.txt", + [102, 111, 111], + "ascii" + ); + }; + + const unlink = () => { + ReactNativeBlobUtil.fs.unlink(result + "/text.txt"); + }; + + const getConstants = () => { + let obj = ReactNativeBlobUtil.fs.dirs.CacheDir; + setResult(obj); + }; + + const writeFile = () => { + ReactNativeBlobUtil.fs.writeFile( + result + "/text.txt", + "Try to write str", + "utf8" + ); + }; + + const writeStream = () => { + ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false); + }; + + const writeArrayChunk = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "ascii", false) + .then((reactNativeBlobUtilWriteStream) => { + reactNativeBlobUtilWriteStream.encoding = "ascii"; + reactNativeBlobUtilWriteStream.write(["101", "32", "97"]); + }); + }; + + const writeChunk = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "utf8", false) + .then((reactNativeBlobUtilWriteStream) => { + reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ=="); + }); + }; + + const closeStream = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "utf8", false) + .then((reactNativeBlobUtilWriteStream) => { + setTimeout(() => { + reactNativeBlobUtilWriteStream.close(); + }, 1000); + }); + }; + const readStream = () => { + ReactNativeBlobUtil.fs.readStream(result + "/text.txt", "utf8", 4000, 200); + }; + + const mkdir = () => { + ReactNativeBlobUtil.fs.mkdir( + ReactNativeBlobUtil.fs.dirs.DocumentDir + "/" + mkdirParam + ); + }; + + const stat = () => { + ReactNativeBlobUtil.fs.stat(result + "/text.txt"); + }; + + const copyFileToCache = () => { + ReactNativeBlobUtil.fs.cp(result + "/text.txt", result + "/text1.txt"); + }; + + const writeFileArray = () => { + ReactNativeBlobUtil.fs.writeFile( + result + "/text.txt", + [102, 111, 111], + "ascii" + ); + }; + + const exists = () => { + ReactNativeBlobUtil.fs.exists(result + "/text.txt"); + }; + + const lstat = () => { + ReactNativeBlobUtil.fs.lstat(result + "/text.txt"); + }; + + const mv = () => { + ReactNativeBlobUtil.fs.mv(result + "/text.txt", result + "/text1.txt"); + }; + + const hash = () => { + ReactNativeBlobUtil.fs.hash(result + "/text.txt", "md5"); + }; + + const readFile = () => { + ReactNativeBlobUtil.fs.readFile(result + "/text.txt", "utf8", 4000); + }; + + const slice = () => { + ReactNativeBlobUtil.fs.slice( + result + "/text.txt", + result + "/text1.txt", + 2, + 5 + ); + }; + + const df = () => { + ReactNativeBlobUtil.fs.df(); + }; + + const addListener = () => { + let obj = "addListener是空实现"; + setResult(obj); + }; + + const removeListeners = () => { + let obj = "removeListeners是空实现"; + setResult(obj); + }; + + const emitExpiredEvent = () => { + let obj = "emitExpiredEvent是空实现,三方库没有调用"; + setResult(obj); + }; + + return ( + + + BlobUtil - ); + + {result} + + + + + BlobUtilTurboModule.getConstants() + + + + BlobUtilTurboModule.createFile() + + + + BlobUtilTurboModule.unlink() + + + + + BlobUtilTurboModule.copyFileToCache() + + + + + BlobUtilTurboModule.writeFile() + + + + BlobUtilTurboModule.stat() + + + + BlobUtilTurboModule.mkdir() + + + + BlobUtilTurboModule.writeStream() + + + + BlobUtilTurboModule.ls() + + + + + BlobUtilTurboModule.createFileASCII() + + + + + + BlobUtilTurboModule.writeFileArray() + + + + + BlobUtilTurboModule.exists() + + + + BlobUtilTurboModule.lstat() + + + + BlobUtilTurboModule.hash() + + + + BlobUtilTurboModule.readFile() + + + + BlobUtilTurboModule.slice() + + + + BlobUtilTurboModule.df() + + + + BlobUtilTurboModule.closeStream() + + + + + BlobUtilTurboModule.writeArrayChunk() + + + + + BlobUtilTurboModule.writeChunk() + + + + BlobUtilTurboModule.readStream() + + + + BlobUtilTurboModule.mv() + + + + addListener() + + + + removeListeners() + + + + emitExpiredEvent() + + + + + + ); } const styles = StyleSheet.create({ - container: { - width: '100%', - height: '100%', - flexDirection: 'column', - alignItems: 'center', - backgroundColor: '#F1F3F5', - }, - baseText: { - width: '100%', - height: '100%', - fontWeight: 'bold', - textAlign: 'center', - fontSize: 16, - ellipsizeMode: 'tail', - numberOfLines: 2 - }, - titleArea: { - width: '90%', - height: '8%', - alignItems: 'center', - flexDirection: 'row', - }, - title: { - width: '90%', - color: '#000000', - textAlign: 'left', - fontSize: 30, - }, - scrollView: { - width: '90%', - marginHorizontal: 10, - }, - - inputArea: { - width: '90%', - height: '10%', - borderWidth: 2, - borderColor: '#000000', - marginTop: 8, - justifyContent: 'center', - alignItems: 'center', - }, - baseArea: { - width: '100%', - height: 60, - borderRadius: 4, - borderColor: '#000000', - marginTop: 6, - backgroundColor: '#FFFFFF', - flexDirection: 'row', - alignItems: 'center', - paddingLeft: 8, - paddingRight: 8 - } + container: { + width: "100%", + height: "100%", + flexDirection: "column", + alignItems: "center", + backgroundColor: "#F1F3F5", + }, + baseText: { + width: "100%", + height: "100%", + fontWeight: "bold", + textAlign: "center", + fontSize: 16, + ellipsizeMode: "tail", + numberOfLines: 2, + }, + titleArea: { + width: "90%", + height: "8%", + alignItems: "center", + flexDirection: "row", + }, + title: { + width: "90%", + color: "#000000", + textAlign: "left", + fontSize: 30, + }, + scrollView: { + width: "90%", + marginHorizontal: 10, + }, + + inputArea: { + width: "90%", + height: "10%", + borderWidth: 2, + borderColor: "#000000", + marginTop: 8, + justifyContent: "center", + alignItems: "center", + }, + baseArea: { + width: "100%", + height: 60, + borderRadius: 4, + borderColor: "#000000", + marginTop: 6, + backgroundColor: "#FFFFFF", + flexDirection: "row", + alignItems: "center", + paddingLeft: 8, + paddingRight: 8, + }, }); ``` @@ -348,7 +416,7 @@ const styles = StyleSheet.create({ 首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` -### 在工程根目录的 `oh-package.json` 添加 overrides字段 +### 在工程根目录的 `oh-package.json` 添加 overrides 字段 ``` { @@ -390,37 +458,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -把`tester/node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/`目录下的源码``复制到`harmony`工程根目录下 - -在`harmony`工程根目录的 `build-profile.template.json5`（若存在）和`build-profile.json5` 添加以下模块 - -``` -modules:[ - ... - { - name: 'blobUtil', - srcPath: './blobUtil', - } -] -``` - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/rnoh-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 BlobUtilPackage @@ -519,7 +557,7 @@ ohpm install #### Android API -##### ReactNativeBlobUtil.android +##### ReactNativeBlobUtil.android | Name | Description | Required | Platform | HarmonyOS Support | | :-----------------: | :----------: | :------: | :------: | :---------------: | @@ -529,7 +567,7 @@ ohpm install #### File System Access API -##### ReactNativeBlobUtil.fs +##### ReactNativeBlobUtil.fs | Name | Description | Required | Platform | HarmonyOS Support | | :---------: | :--------------------------------: | :------: | :---------: | :---------------: | @@ -556,7 +594,7 @@ ohpm install #### iOS API -#### ReactNativeBlobUtil.ios +#### ReactNativeBlobUtil.ios | Name | Description | Required | Platform | HarmonyOS Support | | --------------- | -------------------------------------- | -------- | -------- | ----------------- | @@ -565,26 +603,24 @@ ohpm install #### Network Utils -##### ReactNativeBlobUtil.net +##### ReactNativeBlobUtil.net | Name | Description | Required | Platform | HarmonyOS Support | | ------------- | ----------- | -------- | ----------- | ----------------- | -| getCookies | 获取cookie | No | IOS/Android | No | -| removeCookies | 删除cookie | No | IOS/Android | No | +| getCookies | 获取 cookie | No | IOS/Android | No | +| removeCookies | 删除 cookie | No | IOS/Android | No | #### Session API -##### ReactNativeBlobUtil.session +##### ReactNativeBlobUtil.session | Name | Description | Required | Platform | HarmonyOS Support | | ------- | ----------- | -------- | ----------- | ----------------- | | session | 会话 | No | IOS/Android | No | - - #### MediaStore(Android Media Storage) -##### ReactNativeBlobUtil.MediaCollection +##### ReactNativeBlobUtil.MediaCollection | Name | Description | Required | Platform | HarmonyOS Support | | ---------------- | -------------- | -------- | -------- | ----------------- | diff --git a/zh-cn/react-native-cameraroll.md b/zh-cn/react-native-cameraroll.md index e3c436488218af6b277292dcfc7674eb02e9be87..87fb2a5e4170b2b195a7f3afe28794c84171c6b2 100644 --- a/zh-cn/react-native-cameraroll.md +++ b/zh-cn/react-native-cameraroll.md @@ -128,24 +128,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-camera-roll": "file:../../node_modules/@react-native-oh-tpl/camera-roll/harmony/camera_roll" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 CameraRollPackage @@ -213,7 +196,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ### 应用权限申请 -> [!tip] "ohos.permission.READ_IMAGEVIDEO"，"ohos.permission.WRITE_IMAGEVIDEO"权限等级为system_basic，授权方式为user_grant，[使用ACL签名的配置指导](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/signing-0000001587684945-V3#section157591551175916) +> [!tip] "ohos.permission.READ_IMAGEVIDEO"，"ohos.permission.WRITE_IMAGEVIDEO"权限等级为system_basic，授权方式为user_grant，[使用 ACL 签名的配置指导](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/signing-0000001587684945-V3#section157591551175916) 在 `YourProject/entry/src/main/module.json5`补上配置 @@ -293,7 +276,7 @@ ohpm install - [ ] harmony 查找图片/视频部分查询条件和返回字段需要使用系统接口 - [ ] harmony 纯图片相册暂未对外开放，系统相册不返回相册名 - [ ] harmony 删除图片/视频需要使用系统接口 -- [ ] harmony 暂无对标ios图片列表刷新的方法 +- [ ] harmony 暂无对标 ios 图片列表刷新的方法 ## 其他 diff --git a/zh-cn/react-native-clipboard-clipboard.md b/zh-cn/react-native-clipboard-clipboard.md index cb10310ddca9e51d2754407f4fd5ddada279f804..4465373379b564f8785e107ff66b30e5c4e96830 100644 --- a/zh-cn/react-native-clipboard-clipboard.md +++ b/zh-cn/react-native-clipboard-clipboard.md @@ -106,24 +106,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-clipboard": "file:../../node_modules/@react-native-oh-tpl/clipboard/harmony/clipboard" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 ClipboardPackage diff --git a/zh-cn/react-native-clippath.md b/zh-cn/react-native-clippath.md index 67e8abbd4982ac06a9747c522cfaf9ffe3b40227..76ab8d9f89d17d4b9eb63f926739eac088422f75 100644 --- a/zh-cn/react-native-clippath.md +++ b/zh-cn/react-native-clippath.md @@ -9,7 +9,6 @@

- > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-clippath) ## 安装与使用 @@ -39,23 +38,24 @@ yarn add @react-native-oh-tpl/clip-path@file:# 下面的代码展示了这个库的基本使用场景： ```jsx -import { View, Text, ScrollView } from 'react-native' -import React from 'react' -import { ClipPathView } from 'react-native-clippathview' +import { View, Text, ScrollView } from "react-native"; +import React from "react"; +import { ClipPathView } from "react-native-clippathview"; export default function index() { - const viewBox = [0, 0, 400, 400] - const path = "M 0 0 L 400 0 L 0 400 L 400 400 Z" + const viewBox = [0, 0, 400, 400]; + const path = "M 0 0 L 400 0 L 0 400 L 400 400 Z"; return ( - - - MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM + + + + MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM + - ) + ); } - ``` ## 兼容性 @@ -66,7 +66,7 @@ export default function index() { 本文档内容基于以下版本验证通过： -1. RNOH: 0.72.26; SDK: HarmonyOS-NEXT-DP2; IDE: DevEco Studio 5.0.3.29; ROM: 205.0.0.18; +1. RNOH: 0.72.26; SDK: HarmonyOS-NEXT-DP2; IDE: DevEco Studio 5.0.3.29; ROM: 205.0.0.18; 2. RNOH: 0.72.26; SDK: armonyOS NEXT Developer preview2、5.0.0.22(API Version 12 Canary3); IDE: DevEco Studio: 5.0.3.300；ROM: 3.0.0.22; ## Link @@ -106,23 +106,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-clip-path": "file:../../node_modules/@react-native-oh-tpl/clip-path/harmony/clip_path", - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 在 ArkTs 侧引入 ClipPath 组件 @@ -188,39 +172,38 @@ ohpm install > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------------- | ------------------------------------------------------------ | ----------------- | -------- | ----------- | ----------------- | -| svgKey | 唯一key | string | No | IOS/Android | Yes | -| d | 形状由一系列命令定义（svg path data） | string | No | IOS/Android | Yes | -| viewBox | 定义用户空间中的位置和维度 | Array(4) | No | IOS/Android | Yes | -| align | preserveAspectRatio 属性的 align | string | No | IOS/Android | No | -| aspect | preserveAspectRatio 属性的 meetOrSlice | meet/slice/none | No | IOS/Android | No | -| fillRule | 路径内部填充规则 | nonzero/evenodd | No | IOS/Android | No | -| strokeWidth | 路径描边宽度 | number | No | IOS/Android | Yes | -| strokeCap | 开放路径两端的形状 | butt/round/square | No | IOS/Android | Yes | -| strokeJoin | 路径转角处使用的形状 | bevel/miter/round | No | IOS/Android | Yes | -| strokeMiter | strokeJoin值是miter，设置夹角延伸 | number | No | IOS/Android | Yes | -| strokeStart | IOS CAShapeLayer 描线开始的地方占总路径的百分比。默认值是0。 | number | No | IOS/Android | No | -| strokeEnd | IOS CAShapeLayer 表示绘制结束的地方站总路径的百分比。默认值是1，如果小于等于strokeStart 则绘制不出任何内容。 | number | No | IOS/Android | No | -| translateZ | 设置定位层级，相当于index | number | No | IOS/Android | Yes | -| transX | 在二维平面上水平方向移动元素 | number | No | IOS/Android | Yes | -| transY | 在二维平面上垂直方向移动元素 | number | No | IOS/Android | Yes | -| transPercentageValue | transX、transY 使用百分比 | boolean | No | IOS/Android | Yes | -| rot | 元素围绕一个定点旋转 | number | No | IOS/Android | Yes | -| rotOx | 旋转中心点水平位置 | number | No | IOS/Android | Yes | -| rotOy | 旋转中心点垂直位置 | number | No | IOS/Android | Yes | -| rotPercentageValue | rotOx、rotOy 使用百分比 | boolean | No | IOS/Android | Yes | -| sc | 放大或缩小元素 | number | No | IOS/Android | Yes | -| scX | 水平缩放 | number | No | IOS/Android | Yes | -| scY | 垂直缩放 | number | No | IOS/Android | Yes | -| scO | 缩放中心点位置 | number | No | IOS/Android | Yes | -| scOx | 缩放中心点水平位置 | number | No | IOS/Android | Yes | -| scOy | 缩放中心点垂直位置 | number | No | IOS/Android | Yes | -| scPercentageValue | scO、scOx、scOy使用百分比 | boolean | No | IOS/Android | Yes | - - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ----------- | ----------------- | +| svgKey | 唯一 key | string | No | IOS/Android | Yes | +| d | 形状由一系列命令定义（svg path data） | string | No | IOS/Android | Yes | +| viewBox | 定义用户空间中的位置和维度 | Array(4) | No | IOS/Android | Yes | +| align | preserveAspectRatio 属性的 align | string | No | IOS/Android | No | +| aspect | preserveAspectRatio 属性的 meetOrSlice | meet/slice/none | No | IOS/Android | No | +| fillRule | 路径内部填充规则 | nonzero/evenodd | No | IOS/Android | No | +| strokeWidth | 路径描边宽度 | number | No | IOS/Android | Yes | +| strokeCap | 开放路径两端的形状 | butt/round/square | No | IOS/Android | Yes | +| strokeJoin | 路径转角处使用的形状 | bevel/miter/round | No | IOS/Android | Yes | +| strokeMiter | strokeJoin 值是 miter，设置夹角延伸 | number | No | IOS/Android | Yes | +| strokeStart | IOS CAShapeLayer 描线开始的地方占总路径的百分比。默认值是 0。 | number | No | IOS/Android | No | +| strokeEnd | IOS CAShapeLayer 表示绘制结束的地方站总路径的百分比。默认值是 1，如果小于等于 strokeStart 则绘制不出任何内容。 | number | No | IOS/Android | No | +| translateZ | 设置定位层级，相当于 index | number | No | IOS/Android | Yes | +| transX | 在二维平面上水平方向移动元素 | number | No | IOS/Android | Yes | +| transY | 在二维平面上垂直方向移动元素 | number | No | IOS/Android | Yes | +| transPercentageValue | transX、transY 使用百分比 | boolean | No | IOS/Android | Yes | +| rot | 元素围绕一个定点旋转 | number | No | IOS/Android | Yes | +| rotOx | 旋转中心点水平位置 | number | No | IOS/Android | Yes | +| rotOy | 旋转中心点垂直位置 | number | No | IOS/Android | Yes | +| rotPercentageValue | rotOx、rotOy 使用百分比 | boolean | No | IOS/Android | Yes | +| sc | 放大或缩小元素 | number | No | IOS/Android | Yes | +| scX | 水平缩放 | number | No | IOS/Android | Yes | +| scY | 垂直缩放 | number | No | IOS/Android | Yes | +| scO | 缩放中心点位置 | number | No | IOS/Android | Yes | +| scOx | 缩放中心点水平位置 | number | No | IOS/Android | Yes | +| scOy | 缩放中心点垂直位置 | number | No | IOS/Android | Yes | +| scPercentageValue | scO、scOx、scOy 使用百分比 | boolean | No | IOS/Android | Yes | ## 遗留问题 + 部分属性目前版本暂不支持，具体参考属性表格 `HarmonyOS ` 列。 ## 其他 @@ -229,5 +212,4 @@ ohpm install 本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-clippath/blob/sig/LICENSE) ，请自由地享受和参与开源。 ------------------------------------------------------------- - +--- diff --git a/zh-cn/react-native-community-blur.md b/zh-cn/react-native-community-blur.md index 8a3650468eea21c71cff97b39c46bc774ec49840..f1f75422d45e3f29fccc012f7165fbb231f3a3e6 100644 --- a/zh-cn/react-native-community-blur.md +++ b/zh-cn/react-native-community-blur.md @@ -236,24 +236,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-blur": "file:../../node_modules/@react-native-oh-tpl/blur/harmony/blur" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 BlurPackage @@ -410,8 +393,8 @@ ohpm install ## 遗留问题 -- [x] blurTypes设置为ios/android平台定义枚举值，闪退[issue#755](https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/755) -- [ ] harmony 暂不支持VibrancyView组件 +- [x] blurTypes 设置为 ios/android 平台定义枚举值，闪退[issue#755](https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/755) +- [ ] harmony 暂不支持 VibrancyView 组件 ## 其他 diff --git a/zh-cn/react-native-community-checkbox.md b/zh-cn/react-native-community-checkbox.md index dc870d2532e4256d67d23df123b6c29bc1eb40a2..e4d444a16cca3f220687a6843367e0a88767f2a4 100644 --- a/zh-cn/react-native-community-checkbox.md +++ b/zh-cn/react-native-community-checkbox.md @@ -104,24 +104,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-checkbox": "file:../../node_modules/@react-native-oh-tpl/checkbox/harmony/checkbox" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 CheckboxPackge diff --git a/zh-cn/react-native-community-datetimepicker.md b/zh-cn/react-native-community-datetimepicker.md index 293af18cc31752da088ee6aa23aaf7fd9c3baf69..3624af5ea9f77c1ce1729180242da67a8fe9fd7a 100644 --- a/zh-cn/react-native-community-datetimepicker.md +++ b/zh-cn/react-native-community-datetimepicker.md @@ -126,24 +126,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-datetimepicker": "file:../../node_modules/@react-native-oh-tpl/datetimepicker/harmony/datetimepicker" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 datetimepicker @@ -263,7 +246,7 @@ ohpm install ## 遗留问题 -- [x] 已解决：textColor属性在compact和inline模式改变值后使用禁用操作，颜色会变白色[issue#17](https://github.com/react-native-oh-library/datetimepicker/issues/17) +- [x] 已解决：textColor 属性在 compact 和 inline 模式改变值后使用禁用操作，颜色会变白色[issue#17](https://github.com/react-native-oh-library/datetimepicker/issues/17) - [ ] 部分接口，未适配 diff --git a/zh-cn/react-native-community-netinfo.md b/zh-cn/react-native-community-netinfo.md index 8f237cb2ffd7cc0c7138e4eab810ba615181246a..e7fc61ca2748f1ce2205fcce5deefd59a6ef378a 100644 --- a/zh-cn/react-native-community-netinfo.md +++ b/zh-cn/react-native-community-netinfo.md @@ -110,24 +110,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-netinfo": "file:../../node_modules/@react-native-oh-tpl/netinfo/harmony/netinfo" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 RNCNetInfoPackage diff --git a/zh-cn/react-native-community-progress-bar-android.md b/zh-cn/react-native-community-progress-bar-android.md index 82dbde1c9271bd82f2bc0eea8771dbc52130e22b..aa005743c9aa0ef9b094164ca83c70c79d92268f 100644 --- a/zh-cn/react-native-community-progress-bar-android.md +++ b/zh-cn/react-native-community-progress-bar-android.md @@ -87,24 +87,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-progress-bar-android": "file:../../node_modules/@react-native-oh-tpl/progress-bar-android/harmony/progress_bar_android" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 ProgressBarAndroidPackage diff --git a/zh-cn/react-native-community-progress-view.md b/zh-cn/react-native-community-progress-view.md index 21efa0852494013d2cb88a9a36cbbf9893f65b6d..fd7b002303739b8e88222678c6e62d8ecc7835a0 100644 --- a/zh-cn/react-native-community-progress-view.md +++ b/zh-cn/react-native-community-progress-view.md @@ -90,24 +90,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-progress-view": "file:../../node_modules/@react-native-oh-tpl/progress-view/harmony/progress-view" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 ProgressViewPackage diff --git a/zh-cn/react-native-community-push-notification-ios.md b/zh-cn/react-native-community-push-notification-ios.md index b5d86b30b41facda111542875cc2b5efa59d5a33..c999e3539b98587d5ff8b7a9c312da7fbb0a654f 100644 --- a/zh-cn/react-native-community-push-notification-ios.md +++ b/zh-cn/react-native-community-push-notification-ios.md @@ -200,24 +200,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-push-notification": "file:../../node_modules/@react-native-oh-tpl/push-notification-ios/harmony/push_notification" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 PushNotificationPackage @@ -328,7 +311,7 @@ RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1 > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -以下属性已验证，更多属性详情请查看 [react-native-push-notification-ios的文档介绍](https://github.com/react-native-oh-library/react-native-push-notification) +以下属性已验证，更多属性详情请查看 [react-native-push-notification-ios 的文档介绍](https://github.com/react-native-oh-library/react-native-push-notification) **Parameters:** @@ -350,8 +333,8 @@ _NotificationRequest:_ ## 遗留问题 -- [ ] HarmonyOS的NotificationManager的规格和IOS不一致，其NotificationRequest所含参数，在HarmonyOS上部分没有适配对应参数，问题: [issue#1](https://github.com/react-native-oh-library/react-native-push-notification/issues/1) -- [ ] 原库部分接口在HarmonyOS中没有对应接口处理相关逻辑，问题: [issue#2](https://github.com/react-native-oh-library/react-native-push-notification/issues/2) +- [ ] HarmonyOS 的 NotificationManager 的规格和 IOS 不一致，其 NotificationRequest 所含参数，在 HarmonyOS 上部分没有适配对应参数，问题: [issue#1](https://github.com/react-native-oh-library/react-native-push-notification/issues/1) +- [ ] 原库部分接口在 HarmonyOS 中没有对应接口处理相关逻辑，问题: [issue#2](https://github.com/react-native-oh-library/react-native-push-notification/issues/2) ## 其他 diff --git a/zh-cn/react-native-community-slider.md b/zh-cn/react-native-community-slider.md index bf64fe9e30c01a11c6db3bf07085e98bd852ef3f..8df8cda218443b53d19e2d882c5149ee5f909787 100644 --- a/zh-cn/react-native-community-slider.md +++ b/zh-cn/react-native-community-slider.md @@ -92,24 +92,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-slider": "file:../../node_modules/@react-native-oh-tpl/slider/harmony/slider" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 SliderPackge diff --git a/zh-cn/react-native-cookies.md b/zh-cn/react-native-cookies.md index 256f5dcc12123043e9c7c5fa33da7ad43f7abb3f..774b2eb99044ccbf9e6d8cc475e273f342f17778 100644 --- a/zh-cn/react-native-cookies.md +++ b/zh-cn/react-native-cookies.md @@ -35,17 +35,23 @@ yarn add @react-native-oh-tpl/cookies@file:# -HarmonyOS中使用react-native-cookies需要配合react-native-webview使用，具体请参考[@react-native-oh-tpl/react-native-webview](/zh-cn/react-native-webview.md) +HarmonyOS 中使用 react-native-cookies 需要配合 react-native-webview 使用，具体请参考[@react-native-oh-tpl/react-native-webview](/zh-cn/react-native-webview.md) 下面的代码展示了这个库的基本使用场景： > [!WARNING] 使用时 import 的库名不变。 ```ts -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'; +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; @@ -63,67 +69,97 @@ export interface Cookies { } export function CookiesPage() { - const httpUrl = 'https://www.baidu.com'; - const [result, setResult] = useState('请点击按钮，进行操作'); + const httpUrl = "https://www.baidu.com"; + const [result, setResult] = useState("请点击按钮，进行操作"); const webViewRef = useRef(null); return ( - ; + ; {result} - { - let cookieResult = await CookieManager.clearAll(true); - let result = cookieResult ? '清除所有cookie成功' : '清除所有cookie失败'; - setResult(result + ''); - }} > + { + let cookieResult = await CookieManager.clearAll(true); + let result = cookieResult + ? "清除所有cookie成功" + : "清除所有cookie失败"; + setResult(result + ""); + }} + > clearAll()【清除所有cookie】 - { - let cookieResult = await CookieManager.get(httpUrl, true); - setResult(JSON.stringify(cookieResult)); - }} > + { + let cookieResult = await CookieManager.get(httpUrl, true); + setResult(JSON.stringify(cookieResult)); + }} + > get()【根据url获取cookie】 - { - let curCookie: Cookie = {name: 'myAddCookie', value: 'myNewCookie'}; - let cookieResult = await CookieManager.set(httpUrl, curCookie, true); - let result = cookieResult ? '根据url设置cookie成功' : '根据url设置cookie失败'; - setResult(result); - }} > + { + let curCookie: Cookie = { name: "myAddCookie", value: "myNewCookie" }; + let cookieResult = await CookieManager.set(httpUrl, curCookie, true); + let result = cookieResult + ? "根据url设置cookie成功" + : "根据url设置cookie失败"; + setResult(result); + }} + > set()【根据url设置cookie】 - { - let cookieResult = await CookieManager.clearByName(httpUrl, 'myAddCookie', true); - let result = cookieResult ? '根据名称删除cookie成功' : '根据名称删除cookie失败'; - setResult(result); - }} > + { + let cookieResult = await CookieManager.clearByName( + httpUrl, + "myAddCookie", + true + ); + let result = cookieResult + ? "根据名称删除cookie成功" + : "根据名称删除cookie失败"; + setResult(result); + }} + > clearByName()【根据名称删除cookie】 - { - CookieManager.flushForHarmony(() => { - if (webViewRef.current) { - webViewRef.current.reload(); - } - }); - setResult('刷新cookie成功'); - }} > + { + CookieManager.flushForHarmony(() => { + if (webViewRef.current) { + webViewRef.current.reload(); + } + }); + setResult("刷新cookie成功"); + }} + > flush()【刷新cookie】 - { - let cookieResult = await CookieManager.removeSessionCookies(); - let result = cookieResult ? '清除会话cookie成功' : '清除会话cookie失败'; - setResult(result); - }} > + { + let cookieResult = await CookieManager.removeSessionCookies(); + let result = cookieResult + ? "清除会话cookie成功" + : "清除会话cookie失败"; + setResult(result); + }} + > removeSessionCookies()【清除会话cookie】 @@ -132,31 +168,31 @@ export function CookiesPage() { const styles = StyleSheet.create({ container: { - width: '100%', - height: '100%', - alignItems: 'center' + width: "100%", + height: "100%", + alignItems: "center", }, pageArea: { - width: '95%', - height: 80 + width: "95%", + height: 80, }, resultArea: { - width: '95%', + width: "95%", borderWidth: 2, - borderColor: 'gray', + borderColor: "gray", borderRadius: 10, - marginTop: 5 + marginTop: 5, }, button: { - backgroundColor: '#FF0000', + backgroundColor: "#FF0000", paddingHorizontal: 16, paddingVertical: 10, borderRadius: 24, - alignItems: 'center', - justifyContent: 'center', + alignItems: "center", + justifyContent: "center", elevation: 4, - width: '80%', - marginTop: 5 + width: "80%", + marginTop: 5, }, }); ``` @@ -200,25 +236,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-cookies": "file:../../node_modules/@react-native-oh-tpl/cookies/harmony/rn_cookies", - ... - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 cookies、webview @@ -276,7 +294,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 在 ArkTs 侧引入 webView组件 +### 在 ArkTs 侧引入 webView 组件 找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： @@ -306,7 +324,7 @@ std::vector> PackageProvider::getPackages(Package::Cont ... ``` -### 在 ArkTs 侧引入 CookiesPackage和WebViewPackage +### 在 ArkTs 侧引入 CookiesPackage 和 WebViewPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： diff --git a/zh-cn/react-native-exception-handler.md b/zh-cn/react-native-exception-handler.md index c8024f8b7e7f4f3f20e229c86646c717e3afb6a1..4c5c7689705e68aae19b80e4f2018ef733cd452e 100644 --- a/zh-cn/react-native-exception-handler.md +++ b/zh-cn/react-native-exception-handler.md @@ -94,7 +94,7 @@ const exceptionhandler = (exceptionString) => { setNativeExceptionHandler( exceptionhandler, forceAppQuit, - executeDefaultHandler, + executeDefaultHandler ); // - exceptionhandler is the exception handler function // - forceAppQuit is an optional ANDROID specific parameter that defines @@ -144,24 +144,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```diff -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - -+ "rnoh-exception-handler": "file:../../node_modules/@react-native-oh-tpl/react-native-exception-handler/harmony/exception_handler" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 ExceptionHandlerPackage diff --git a/zh-cn/react-native-fast-image.md b/zh-cn/react-native-fast-image.md index 077ccb83e3f6173cffc7191004352992e007acfc..26b9c3263cde5c6f73744569e718961eccf63558 100644 --- a/zh-cn/react-native-fast-image.md +++ b/zh-cn/react-native-fast-image.md @@ -96,24 +96,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-fast-image": "file:../../node_modules/@react-native-oh-tpl/react-native-fast-image/harmony/fast_image" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 FastImagePackage diff --git a/zh-cn/react-native-fs.md b/zh-cn/react-native-fs.md index 71a85a13041a8c016ef08ee623eff1c0e27aabf7..398de747018f7e9a9062f909412c2ea5ca443ae1 100644 --- a/zh-cn/react-native-fs.md +++ b/zh-cn/react-native-fs.md @@ -69,7 +69,7 @@ function App(): React.JSX.Element { }, (err) => { console.error("file mkdir: " + err.message); - }, + } ); }; // 组件 @@ -181,24 +181,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-fs": "file:../../node_modules/@react-native-oh-tpl/react-native-fs/harmony/fs" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 FsPackge @@ -357,8 +340,8 @@ ohpm install ## 遗留问题 -- HarmonyOS的hash哈希API中关于算法参数algorithm目前仅支持"md5"、"sha1"、 "sha256"，其他相关算法参数目前不支持，问题: [issue#1](https://github.com/react-native-oh-library/react-native-fs/issues/1) -- 原库部分接口在HarmonyOS中没有对应文件路径常量及接口处理相关逻辑，问题: [issue#2](https://github.com/react-native-oh-library/react-native-fs/issues/2) +- HarmonyOS 的 hash 哈希 API 中关于算法参数 algorithm 目前仅支持"md5"、"sha1"、 "sha256"，其他相关算法参数目前不支持，问题: [issue#1](https://github.com/react-native-oh-library/react-native-fs/issues/1) +- 原库部分接口在 HarmonyOS 中没有对应文件路径常量及接口处理相关逻辑，问题: [issue#2](https://github.com/react-native-oh-library/react-native-fs/issues/2) ## 其他 diff --git a/zh-cn/react-native-geolocation.md b/zh-cn/react-native-geolocation.md index 0e1b3b7f0794260402f9d4b4a5f68fef6e9f69e2..1374e306eeb2765497d79f112deb619e2791d1e4 100644 --- a/zh-cn/react-native-geolocation.md +++ b/zh-cn/react-native-geolocation.md @@ -92,24 +92,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-geolocation": "file:../../node_modules/@react-native-oh-tpl/react-native-geolocation/harmony/geolocation" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 geolocation diff --git a/zh-cn/react-native-gesture-handler.md b/zh-cn/react-native-gesture-handler.md index 3e554b32e5808020dee9bb0a871e25187dd2ba16..15d68ef54dce0175f605b5f55ab9eb876bac9382 100644 --- a/zh-cn/react-native-gesture-handler.md +++ b/zh-cn/react-native-gesture-handler.md @@ -83,7 +83,7 @@ class Circle extends Component { { translateX: Animated.add( this._touchX, - new Animated.Value(-circleRadius), + new Animated.Value(-circleRadius) ), }, ], @@ -140,24 +140,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-gesture-handler": "file:../../node_modules/@react-native-oh-tpl/react-native-gesture-handler/harmony/gesture_handler" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 GestureHandlerPackage @@ -330,7 +313,7 @@ Creates a new instance of [PanGesture](https://docs.swmansion.com/react-native-g ### Touchables -Gesture Handler 库提供了一种基于原生按钮的 React Native touchable 组件的实现，它不依赖于 React Native 的 JS responder system。这些组件的实现遵循相同的API，旨在替代 React Native 中的 touchable 组件 +Gesture Handler 库提供了一种基于原生按钮的 React Native touchable 组件的实现，它不依赖于 React Native 的 JS responder system。这些组件的实现遵循相同的 API，旨在替代 React Native 中的 touchable 组件 目前支持： diff --git a/zh-cn/react-native-image-editor.md b/zh-cn/react-native-image-editor.md index eab475a908569b0d43f3e22eeb52cc98e17825f3..b263ddd0fa3e11af5532a4383b19df92371284c4 100644 --- a/zh-cn/react-native-image-editor.md +++ b/zh-cn/react-native-image-editor.md @@ -13,7 +13,7 @@

-> [Github 地址](https://github.com/react-native-oh-library/react-native-image-editor) +> [Github 地址](https://github.com/react-native-oh-library/react-native-image-editor) ## 安装与使用 @@ -36,10 +36,10 @@ yarn add @react-native-oh-tpl/image-editor@file:# > [!TIP] 使用时 import 的库名不变。 ```js -import ImageEditor from '@react-native-community/image-editor'; +import ImageEditor from "@react-native-community/image-editor"; ImageEditor.cropImage(uri, cropData).then((result) => { - console.log('Cropped image uri:', result); + console.log("Cropped image uri:", result); }); ``` @@ -80,25 +80,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "@react-native-oh-tpl/image-editor": "file:../../node_modules/@react-native-oh-tpl/image-editor/harmony/image_editor" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - - +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 在 ArkTs 侧引入 ImageEditorPackage @@ -141,22 +123,22 @@ RNOH：0.72.20; SDK：HarmonyOS-NEXT-DB1; IDE：DevEco Studio 5.0.3.200; ROM：2 ## API -| Name | Description | Platform | HarmonyOS Support | -| --------- | ------------------------------------------------------------ | ----------- | ----------------- | +| Name | Description | Platform | HarmonyOS Support | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------- | | cropImage | Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the promise will be rejected.

If the cropping process is successful, the resultant cropped image will be stored in the cache path, and the CropResult returned in the promise will point to the image in the cache path. ⚠️ Remember to delete the cropped image from the cache path when you are done with it. | ios/Android | yes | cropData -| 名称 | 类型 | 说明 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------- | --------------------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | -| `offset` | { x: number, y: number } | The top-left corner of the cropped image, specified in the original image's coordinate space | yes | All | yes | -| `size` | { width: number, height: number } | Size (dimensions) of the cropped image | yes | All | yes | -| `displaySize` | { width: number, height: number } | Size to which you want to scale the cropped image | no | All | yes | -| `resizeMode` | 'contain' \| 'cover' \| 'stretch' | Resizing mode to use when scaling the image**Default value**: `'cover'` | no | All | yes | +| 名称 | 类型 | 说明 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | +| `offset` | { x: number, y: number } | The top-left corner of the cropped image, specified in the original image's coordinate space | yes | All | yes | +| `size` | { width: number, height: number } | Size (dimensions) of the cropped image | yes | All | yes | +| `displaySize` | { width: number, height: number } | Size to which you want to scale the cropped image | no | All | yes | +| `resizeMode` | 'contain' \| 'cover' \| 'stretch' | Resizing mode to use when scaling the image**Default value**: `'cover'` | no | All | yes | | `quality` | number | A value in range `0.0` - `1.0` specifying compression level of the result image. `1` means no compression (highest quality) and `0` the highest compression (lowest quality)
**Default value**: `0.9` | no | All | yes | -| `format` | 'jpeg' \| 'png' \| 'webp' | The format of the resulting image.
**Default value**: based on the provided image;
if value determination is not possible, `'jpeg'` will be used as a fallback. | no | All | yes | +| `format` | 'jpeg' \| 'png' \| 'webp' | The format of the resulting image.
**Default value**: based on the provided image;
if value determination is not possible, `'jpeg'` will be used as a fallback. | no | All | yes | -## +## ## 遗留问题 @@ -165,4 +147,3 @@ cropData ## 开源协议 本项目基于 [ [The MIT License (MIT)]](https://github.com/callstack/react-native-image-editor/blob/master/LICENSE) ，请自由地享受和参与开源。 - diff --git a/zh-cn/react-native-image-picker.md b/zh-cn/react-native-image-picker.md index 4cb5f5c6afec0b8026fead4c05ae170d4c8b10e4..75852971c6c381ba2c253549a28ad58983af16f0 100644 --- a/zh-cn/react-native-image-picker.md +++ b/zh-cn/react-native-image-picker.md @@ -113,24 +113,7 @@ ohpm install 方法二：直接链接源码 -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "rnoh-image-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-picker/harmony/image_picker" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 配置 CMakeLists 和引入 ImagePickerViewPackage diff --git a/zh-cn/react-native-image-sequence-2.md b/zh-cn/react-native-image-sequence-2.md index 1b836d62f39caf1b2ed45bf9d6d190c3ac0e185c..7697fe418abfcb0499f82cf1a6b3082f814472af 100644 --- a/zh-cn/react-native-image-sequence-2.md +++ b/zh-cn/react-native-image-sequence-2.md @@ -46,7 +46,7 @@ import TestDemo2 from "./TestDemo2"; const images = [ { uri: "https://octodex.github.com/images/stormtroopocat.jpg" }, - {uri: 'https://octodex.github.com/images/saint_nictocat.jpg'}, + { uri: "https://octodex.github.com/images/saint_nictocat.jpg" }, require("./assets/2.jpg"), require("./assets/3.jpg"), require("./assets/4.jpg"), @@ -173,12 +173,22 @@ const ImageSequenceDemo = (props: any) => { keyboardType="numeric" /> - 采样宽度/高度： - - inputSampleWidth(value)} defaultValue='-1' keyboardType='default' /> - inputSampleHeight(value)} defaultValue='-1' keyboardType='default' /> - - + 采样宽度/高度： + + inputSampleWidth(value)} + defaultValue="-1" + keyboardType="default" + /> + inputSampleHeight(value)} + defaultValue="-1" + keyboardType="default" + /> + + {!isShow ? (