From d2c08a4f57408e821b545e4547a28419530e7e16 Mon Sep 17 00:00:00 2001 From: GWX1427087 <15994925+gwx1427087@user.noreply.gitee.com> Date: Sat, 6 Dec 2025 18:32:56 +0800 Subject: [PATCH 1/3] =?UTF-8?q?docs:=20[Issues:=20#IDB5O1]=20=E4=B8=89?= =?UTF-8?q?=E6=96=B9=E5=BA=93=E9=80=82=E9=85=8Dcli=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E9=9C=80=E6=B1=8222=E4=B8=AA=E4=B8=89=E6=96=B9=E5=BA=93?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-ble-plx.md | 175 ++++--- en/react-native-bootsplash.md | 61 ++- en/react-native-cardview.md | 139 ++--- en/react-native-clipboard-clipboard.md | 47 +- en/react-native-clippath-capi.md | 132 +++-- en/react-native-community-progress-view.md | 60 +-- en/react-native-compass-heading.md | 22 +- en/react-native-cookies-cookies.md | 57 +-- en/react-native-exit-app.md | 26 +- en/react-native-fast-image.md | 17 +- en/react-native-hole-view.md | 37 +- en/react-native-image-marker.md | 22 +- en/react-native-incall-manager.md | 76 ++- en/react-native-masked-view-masked-view.md | 151 +++--- en/react-native-randombytes.md | 201 +++++--- en/react-native-restart.md | 44 +- en/react-native-screenshot-prevent.md | 86 +++- en/react-native-sensitive-info.md | 86 +++- en/react-native-sensors.md | 323 ++++++++---- en/react-native-signature-capture.md | 206 ++++---- en/react-native-touch-id.md | 182 ++++--- en/react-native-track-player.md | 37 +- zh-cn/react-native-ble-plx.md | 189 ++++--- zh-cn/react-native-bootsplash.md | 108 ++-- zh-cn/react-native-cardview.md | 141 ++--- zh-cn/react-native-clipboard-clipboard.md | 61 ++- zh-cn/react-native-clippath-capi.md | 72 ++- zh-cn/react-native-community-progress-view.md | 55 +- zh-cn/react-native-compass-heading.md | 24 +- zh-cn/react-native-cookies-cookies.md | 52 +- zh-cn/react-native-exit-app.md | 65 ++- zh-cn/react-native-fast-image.md | 62 ++- zh-cn/react-native-hole-view.md | 59 ++- zh-cn/react-native-image-marker.md | 482 +++++++++--------- zh-cn/react-native-incall-manager.md | 129 +++-- zh-cn/react-native-masked-view-masked-view.md | 155 +++--- zh-cn/react-native-randombytes.md | 213 +++++--- zh-cn/react-native-restart.md | 58 ++- zh-cn/react-native-screenshot-prevent.md | 89 +++- zh-cn/react-native-sensitive-info.md | 208 +++++--- zh-cn/react-native-sensors.md | 314 ++++++++---- zh-cn/react-native-signature-capture.md | 204 ++++---- zh-cn/react-native-touch-id.md | 186 ++++--- zh-cn/react-native-track-player.md | 453 ++++++++-------- 44 files changed, 3227 insertions(+), 2339 deletions(-) diff --git a/en/react-native-ble-plx.md b/en/react-native-ble-plx.md index fb8f4a64..27663816 100644 --- a/en/react-native-ble-plx.md +++ b/en/react-native-ble-plx.md @@ -16,20 +16,18 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: +Find the matching version information in the release address of a third-party library: -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 3.2.0@deprecated | [@react-native-oh-tpl/react-native-ble-plx Releases(deprecated)](https://github.com/react-native-oh-library/react-native-ble-plx/releases) | 0.72 | -| 3.2.1 | [@react-native-ohos/react-native-ble-plx Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-ble-plx/releases) | 0.72 | -| 3.5.1 | [@react-native-ohos/react-native-ble-plx Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-ble-plx/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | +| <= 3.2.0-0.0.4@deprecated | [@react-native-oh-tpl/react-native-ble-plx Releases(deprecated)](https://github.com/react-native-oh-library/react-native-ble-plx/releases) | 0.72 | +| 3.2.1 | [@react-native-ohos/react-native-ble-plx Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-ble-plx/releases) | 0.72 | +| 3.5.1 | [@react-native-ohos/react-native-ble-plx Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-ble-plx/releases) | 0.77 | For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -241,7 +239,6 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: - Method 1 (recommended): Use the HAR file. > [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. @@ -268,7 +265,68 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing BlePlxPackage to ArkTS +### 3. Configuring CMakeLists and Introducing BlePlxPackage + +> If you are using version <= 3.2.0-0.0.4, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: + +```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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-ble-plx/src/main/cpp" ./rn_bleplx) +# 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_ble_plx) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "BlePlxPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4. Introducing BlePlxPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: @@ -284,7 +342,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 5. Running Click the `sync` button in the upper right corner. @@ -303,8 +361,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +Verified in the following versions. + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### Permission Requirements @@ -318,50 +379,50 @@ To use this repository, you need to use the correct React-Native and RNOH versio > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| createClient(restoreStateIdentifier?: string) | creat client | void | No | iOS/Android | yes | -| destroyClient() | remove client | Promise | No | iOS/Android | yes | -| cancelTransaction(transactionId: string) | cancel transcation | Promise | No | iOS/Android | no | -| setLogLevel(logLevel: string) | set log level | Promise | No | iOS/Android | no | -| logLevel() | show log level | Promise | No | iOS/Android | no | -| enable(transactionId: string) | can get transaction Id | Promise | No | iOS/Android | yes | -| disable(transactionId: string) | cannot get transaction Id | Promise | No | iOS/Android | yes | -| state() | bluetooth state | Promise | No | iOS/Android | yes | -| startDeviceScan(filteredUUIDs: string[], options: Object) | start scan device | Promise| No | iOS/Android | yes | -| stopDeviceScan() | stop scan device | Promise | No | iOS/Android | yes | -| requestConnectionPriorityForDevice(deviceId: string, connectionPriority: number,transactionId: string) | request connect priority device | Promise | No | iOS/Android | no | -| readRSSIForDevice(deviceId: string, transactionId: string) | read RSSI device | Promise | No | iOS/Android | yes | -| requestMTUForDevice(deviceId: string, mtu: number, transactionId: string) | request MTU device | Promise | No | iOS/Android | yes | -| devices(deviceIdentifiers: string[]) | identify devices | Promise | No | iOS/Android | yes | -| connectedDevices(serviceUUIDs: string[]) | connect devices | Promise | No | iOS/Android | yes | -| connectToDevice(deviceId: string, options?: Object) | option to connect device | Promise | No | iOS/Android | yes | -| cancelDeviceConnection(deviceId: string) | cancel device connection | Promise | No | iOS/Android | yes | -| isDeviceConnected(deviceId: string) | connected device | Promise | No | iOS/Android | yes | -| discoverAllServicesAndCharacteristicsForDevice(deviceId: string, transactionId: string) | discover all device service and characteristics | Promise | No | iOS/Android | yes | -| servicesForDevice(deviceId: string) | device service | Promise | No | iOS/Android | yes | -| characteristicsForDevice(deviceId: string, serviceUUID: string) | device characteristics | Promise | No | iOS/Android | yes | -| characteristicsForService(serviceIdentifier: number) | service characteristics | Promise | No | iOS/Android | yes | -| descriptorsForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string): Promise | device descriptors | Promise | No | iOS/Android | yes | -| descriptorsForService(serviceIdentifier: number, characteristicUUID: string) | service descriptors | Promise | No | iOS/Android | yes | -| descriptorsForCharacteristic(characteristicIdentifier: number) |descriptors identifier device characteristic | Promise | No | iOS/Android | yes | -| readCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, transactionId: string) | read device characteristic | Promise | No | iOS/Android | yes | -| readCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | read service charcteristic | Promise | No | iOS/Android | yes | -| readCharacteristic(characteristicIdentifier: number, transactionId: string) | read identifier characteristic | Promise | No | iOS/Android | yes | -| writeCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write device characteristic | Promise | No | iOS/Android | yes | -| writeCharacteristicForService(serviceIdentifier: number, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write service characteristic | Promise | No | iOS/Android | yes | -| writeCharacteristic(characteristicIdentifier: number, valueBase64: string, response: boolean,transactionId: string) | write identifier characteristic | Promise | No | iOS/Android | yes | -| monitorCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string,transactionId: string) | monitor device characteristic | Promise | No | iOS/Android | yes | -| monitorCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | monitor service characteristic | Promise | No | iOS/Android | yes | -| monitorCharacteristic(characteristicIdentifier: number, transactionId: string) | monitor identifier characteristic | Promise | No | iOS/Android | yes | -| readDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read device descriptor | Promise | No | iOS/Android | yes | -| readDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read service descriptor | Promise | No | iOS/Android | yes | -| readDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string,transactionId: string) | read identifier characteristic descriptor | Promise | No | iOS/Android | yes | -| readDescriptor(descriptorIdentifier: number, transactionId: string) | read identifier descriptor | Promise | No | iOS/Android | yes | -| writeDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write device descriptor | Promise | No | iOS/Android | yes | -| writeDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write service descriptor | Promise | No | iOS/Android | yes | -| writeDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string, valueBase64: string,transactionId: string) | write identifier characteristic descriptor | Promise | No | iOS/Android | yes | -| writeDescriptor(descriptorIdentifier: number, valueBase64: string, transactionId: string) | write identifier descriptor | Promise | No | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ----------------- | -------- | ----------- | ----------------- | +| createClient(restoreStateIdentifier?: string) | creat client | void | No | iOS/Android | yes | +| destroyClient() | remove client | Promise | No | iOS/Android | yes | +| cancelTransaction(transactionId: string) | cancel transcation | Promise | No | iOS/Android | no | +| setLogLevel(logLevel: string) | set log level | Promise | No | iOS/Android | no | +| logLevel() | show log level | Promise | No | iOS/Android | no | +| enable(transactionId: string) | can get transaction Id | Promise | No | iOS/Android | yes | +| disable(transactionId: string) | cannot get transaction Id | Promise | No | iOS/Android | yes | +| state() | bluetooth state | Promise | No | iOS/Android | yes | +| startDeviceScan(filteredUUIDs: string[], options: Object) | start scan device | Promise | No | iOS/Android | yes | +| stopDeviceScan() | stop scan device | Promise | No | iOS/Android | yes | +| requestConnectionPriorityForDevice(deviceId: string, connectionPriority: number,transactionId: string) | request connect priority device | Promise | No | iOS/Android | no | +| readRSSIForDevice(deviceId: string, transactionId: string) | read RSSI device | Promise | No | iOS/Android | yes | +| requestMTUForDevice(deviceId: string, mtu: number, transactionId: string) | request MTU device | Promise | No | iOS/Android | yes | +| devices(deviceIdentifiers: string[]) | identify devices | Promise | No | iOS/Android | yes | +| connectedDevices(serviceUUIDs: string[]) | connect devices | Promise | No | iOS/Android | yes | +| connectToDevice(deviceId: string, options?: Object) | option to connect device | Promise | No | iOS/Android | yes | +| cancelDeviceConnection(deviceId: string) | cancel device connection | Promise | No | iOS/Android | yes | +| isDeviceConnected(deviceId: string) | connected device | Promise | No | iOS/Android | yes | +| discoverAllServicesAndCharacteristicsForDevice(deviceId: string, transactionId: string) | discover all device service and characteristics | Promise | No | iOS/Android | yes | +| servicesForDevice(deviceId: string) | device service | Promise | No | iOS/Android | yes | +| characteristicsForDevice(deviceId: string, serviceUUID: string) | device characteristics | Promise | No | iOS/Android | yes | +| characteristicsForService(serviceIdentifier: number) | service characteristics | Promise | No | iOS/Android | yes | +| descriptorsForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string): Promise | device descriptors | Promise | No | iOS/Android | yes | +| descriptorsForService(serviceIdentifier: number, characteristicUUID: string) | service descriptors | Promise | No | iOS/Android | yes | +| descriptorsForCharacteristic(characteristicIdentifier: number) | descriptors identifier device characteristic | Promise | No | iOS/Android | yes | +| readCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, transactionId: string) | read device characteristic | Promise | No | iOS/Android | yes | +| readCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | read service charcteristic | Promise | No | iOS/Android | yes | +| readCharacteristic(characteristicIdentifier: number, transactionId: string) | read identifier characteristic | Promise | No | iOS/Android | yes | +| writeCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write device characteristic | Promise | No | iOS/Android | yes | +| writeCharacteristicForService(serviceIdentifier: number, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write service characteristic | Promise | No | iOS/Android | yes | +| writeCharacteristic(characteristicIdentifier: number, valueBase64: string, response: boolean,transactionId: string) | write identifier characteristic | Promise | No | iOS/Android | yes | +| monitorCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string,transactionId: string) | monitor device characteristic | Promise | No | iOS/Android | yes | +| monitorCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | monitor service characteristic | Promise | No | iOS/Android | yes | +| monitorCharacteristic(characteristicIdentifier: number, transactionId: string) | monitor identifier characteristic | Promise | No | iOS/Android | yes | +| readDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read device descriptor | Promise | No | iOS/Android | yes | +| readDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read service descriptor | Promise | No | iOS/Android | yes | +| readDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string,transactionId: string) | read identifier characteristic descriptor | Promise | No | iOS/Android | yes | +| readDescriptor(descriptorIdentifier: number, transactionId: string) | read identifier descriptor | Promise | No | iOS/Android | yes | +| writeDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write device descriptor | Promise | No | iOS/Android | yes | +| writeDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write service descriptor | Promise | No | iOS/Android | yes | +| writeDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string, valueBase64: string,transactionId: string) | write identifier characteristic descriptor | Promise | No | iOS/Android | yes | +| writeDescriptor(descriptorIdentifier: number, valueBase64: string, transactionId: string) | write identifier descriptor | Promise | No | iOS/Android | yes | ## Known Issues diff --git a/en/react-native-bootsplash.md b/en/react-native-bootsplash.md index 739cf50d..6c4c1122 100644 --- a/en/react-native-bootsplash.md +++ b/en/react-native-bootsplash.md @@ -20,17 +20,15 @@ Please refer to the Releases page of the third-party library for the corresponding version information | Third-party Library Version | Release Information | Supported RN Version | -|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| ---------- | -| 6.1.1@deprecated | [@react-native-oh-tpl/react-native-bootsplash Releases(deprecated)](https://github.com/react-native-oh-library/react-native-bootsplash/releases) | 0.72 | -| 6.1.2 | [@react-native-ohos/react-native-bootsplash Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/releases) | 0.72 | -| 6.3.5 | [@react-native-ohos/react-native-bootsplash Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/releases) | 0.77 | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | +| <= 6.1.1-0.0.3@deprecated | [@react-native-oh-tpl/react-native-bootsplash Releases(deprecated)](https://github.com/react-native-oh-library/react-native-bootsplash/releases) | 0.72 | +| 6.1.2 | [@react-native-ohos/react-native-bootsplash Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/releases) | 0.72 | +| 6.3.5 | [@react-native-ohos/react-native-bootsplash Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -321,9 +319,9 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Configure CMakeLists and import BootSplashPackage +### 3. Configure CMakeLists and import RNBootSplashPackage -> V6.1.2 requires the configuration of CMakeLists and the introduction of BootSplashPackage. +> If you are using version <= 6.1.1-0.0.3, please skip this chapter. Open the `entry/src/main/cpp/CMakeLists.txt` file and add the following code: @@ -347,7 +345,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/@react-native-ohos/react-native-bootsplash/src/main/cpp" ./bootsplash) ++ add_subdirectory("${OH_MODULE_DIR}/@react-native-ohos/react-native-bootsplash/src/main/cpp" ./boot_splash) # RNOH_END: manual_package_linking_1 @@ -362,7 +360,7 @@ 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_boot_splash) ++ target_link_libraries(rnoh_app PUBLIC rnoh_bootsplash) # RNOH_END: manual_package_linking_2 ``` @@ -371,14 +369,14 @@ Open the `entry/src/main/cpp/PackageProvider.cpp`，file and add the following c ```diff #include "RNOH/PackageProvider.h" #include "SamplePackage.h" -+ #include "BootsplashPackage.h" ++ #include "RNBootSplashPackage.h" using namespace rnoh; std::vector> PackageProvider::getPackages(Package::Context ctx) { return { std::make_shared(ctx), -+ std::make_shared(ctx) ++ std::make_shared(ctx) }; } ``` @@ -418,10 +416,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: +Verified in the following versions. -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## API @@ -429,11 +428,11 @@ The following combinations have been verified: > [!tip] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------- | ------------------------------------------------------------ | -------- | -------- | ------------ | ----------------- | -| hide | Hide the splash screen. | function | no | Android/iOS| yes | -| isVisible | Return the current visibility status of the native splash screen. | function | no | Android/iOS| yes | -| useHideAnimation | A hook to easily create a custom hide animation by animating all splash screen elements using Animated, react-native-reanimated or else (similar as the video on top of this documentation). | function | no | Android/iOS| yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | +| hide | Hide the splash screen. | function | no | Android/iOS | yes | +| isVisible | Return the current visibility status of the native splash screen. | function | no | Android/iOS | yes | +| useHideAnimation | A hook to easily create a custom hide animation by animating all splash screen elements using Animated, react-native-reanimated or else (similar as the video on top of this documentation). | function | no | Android/iOS | yes | ### hide @@ -451,17 +450,17 @@ type hide = (config?: { fade?: boolean }) => Promise; useHideAnimation(config: {UseHideAnimationConfig}) => {container: ContainerProps;logo: LogoProps;brand: BrandProps;}; ``` -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------ | ------------------------------------------------------------ | ------------------ | -------- | ----------- | ----------------- | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ------------------------------------------------------------- | ------------------ | -------- | ----------- | ----------------- | | ready | a boolean flag to delay the animate execution (default: true) | boolean | No | iOS/Android | partially | -| manifest | the manifest file is generated in your assets directory | Manifest | Yes | iOS/Android | partially | -| logo | logo image in animation | ImageRequireSource | No | iOS/Android | partially | -| darkLogo | logo image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | -| brand | brand image in animation | ImageRequireSource | No | iOS/Android | partially | -| darkBrand | brand image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | -| statusBarTranslucent | sets whether the status bar is transparent | boolean | No | iOS/Android | No | -| navigationBarTranslucent | sets whether the navigation bar is transparent | boolean | No | iOS/Android | No | -| animate | custom hide animation | function | Yes | iOS/Android | partially | +| manifest | the manifest file is generated in your assets directory | Manifest | Yes | iOS/Android | partially | +| logo | logo image in animation | ImageRequireSource | No | iOS/Android | partially | +| darkLogo | logo image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | +| brand | brand image in animation | ImageRequireSource | No | iOS/Android | partially | +| darkBrand | brand image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | +| statusBarTranslucent | sets whether the status bar is transparent | boolean | No | iOS/Android | No | +| navigationBarTranslucent | sets whether the navigation bar is transparent | boolean | No | iOS/Android | No | +| animate | custom hide animation | function | Yes | iOS/Android | partially | ## Known Issues diff --git a/en/react-native-cardview.md b/en/react-native-cardview.md index 19874ccb..fabecc51 100644 --- a/en/react-native-cardview.md +++ b/en/react-native-cardview.md @@ -19,12 +19,12 @@ Please refer to the Releases page of the third-party library for the corresponding version information | Third-party Library Version | Release Information | Supported RN Version | -|-----------------------------|----------------------------------------------------------------------------------------------------------------------------------------------| ---------- | -| 2.0.3@deprecated | [@react-native-oh-tpl/react-native-cardview Releases(deprecated)](https://github.com/react-native-oh-library/react-native-cardview/releases) | 0.72 | -| 2.0.4 | [@react-native-ohos/react-native-cardview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cardview/releases) | 0.72 | -| 2.1.0 | [@react-native-ohos/react-native-cardview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cardview/releases) | 0.77 | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 2.0.3-0.0.2@deprecated | [@react-native-oh-tpl/react-native-cardview Releases(deprecated)](https://github.com/react-native-oh-library/react-native-cardview/releases) | 0.72 | +| 2.0.4 | [@react-native-ohos/react-native-cardview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cardview/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-cardview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cardview/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: @@ -49,72 +49,71 @@ The following code shows the basic use scenario of the repository: > [!WARNING] The name of the imported repository remains unchanged. ```js -import React, { Component } from 'react'; -import { StyleSheet, Text, View, SafeAreaView } from 'react-native'; -import CardView from 'react-native-cardview'; +import React, { Component } from "react"; +import { StyleSheet, Text, View, SafeAreaView } from "react-native"; +import CardView from "react-native-cardview"; export default class Example3 extends Component { render() { return ( - + - - - Helloo - - - + Helloo + + + ); } } const styles = StyleSheet.create({ container: { - flex: 1 + flex: 1, }, card: { - backgroundColor: 'white', - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'center', + backgroundColor: "white", + alignItems: "center", + justifyContent: "center", + alignSelf: "center", flex: 1, - margin: 10 + margin: 10, }, text: { - textAlign: 'center', + textAlign: "center", margin: 10, - height: 75 + height: 75, }, instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5 - } + textAlign: "center", + color: "#333333", + marginBottom: 5, + }, }); - ``` ## Link @@ -171,6 +170,8 @@ Method 2: Directly link to the source code. ### 3. Configuring CMakeLists and Introducing CardViewPackage +> If you are using version <= 2.0.3-0.0.2, please skip this chapter. + Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff @@ -191,7 +192,7 @@ 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/react-native-cardview/src/main/cpp" ./card-view) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-cardview/src/main/cpp" ./card_view) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -228,7 +229,22 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Running +### 4. Introducing CardViewPackage to ArkTS + +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: + +```diff ++ import {CardViewPackage} from '@react-native-ohos/react-native-audio-recorder-player/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new CardViewPackage(ctx) + ]; +} +``` + +### 5. Running Click the `sync` button in the upper right corner. @@ -247,26 +263,27 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: +Verified in the following versions. -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; -## Properties +## Properties - cardview is compatible with all properties of [React Native Text](https://reactnative.dev/docs/text). +cardview is compatible with all properties of [React Native Text](https://reactnative.dev/docs/text). > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| cornerRadius | An attribute to set the elevation of the card. | number | No | iOS/Android | yes | -| cardElevation | An attribute to support shadow on pre-lollipop device in android. | number | No | iOS/Android | yes | -| cardMaxElevation | An attribute to set the radius of the card. | number | No | Android | yes | -| useCompatPadding | CardView adds additional padding to draw shadows on platforms before Lollipop. | boolean | No | Android | no | -| cornerOverlap | On pre-Lollipop platforms, CardView does not clip the bounds of the Card for the rounded corners. | boolean | No | Android | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | ----------------- | +| cornerRadius | An attribute to set the elevation of the card. | number | No | iOS/Android | yes | +| cardElevation | An attribute to support shadow on pre-lollipop device in android. | number | No | iOS/Android | yes | +| cardMaxElevation | An attribute to set the radius of the card. | number | No | Android | yes | +| useCompatPadding | CardView adds additional padding to draw shadows on platforms before Lollipop. | boolean | No | Android | no | +| cornerOverlap | On pre-Lollipop platforms, CardView does not clip the bounds of the Card for the rounded corners. | boolean | No | Android | no | ## Known Issues @@ -276,4 +293,4 @@ The following combinations have been verified: ## License -This project is licensed under [The MIT License](https://github.com/Kishanjvaghela/react-native-cardview/blob/master/LICENSE). \ No newline at end of file +This project is licensed under [The MIT License](https://github.com/Kishanjvaghela/react-native-cardview/blob/master/LICENSE). diff --git a/en/react-native-clipboard-clipboard.md b/en/react-native-clipboard-clipboard.md index 79453628..ac82d396 100644 --- a/en/react-native-clipboard-clipboard.md +++ b/en/react-native-clipboard-clipboard.md @@ -12,19 +12,19 @@

-> [!TIP] [GitHub address](https://github.com/react-native-oh-library/clipboard/tree/sig) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/clipboard) ## Installation and Usage Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.13.2@deprecated | [@react-native-oh-tpl/clipboard Releases(deprecated)](https://github.com/react-native-oh-library/clipboard/releases) | 0.72 | -| 1.13.3 | [@react-native-ohos/clipboard Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.72 | -| 1.16.3 | [@react-native-ohos/clipboard Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 1.13.2-0.0.10@deprecated | [@react-native-oh-tpl/clipboard Releases(deprecated)](https://github.com/react-native-oh-library/clipboard/releases) | 0.72 | +| 1.13.3 | [@react-native-ohos/clipboard Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.72 | +| 1.16.3 | [@react-native-ohos/clipboard Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: @@ -131,7 +131,10 @@ export default App; ## Link -Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. +Version >= @react-native-ohos/clipboard1.13.3 now supports Autolink without requiring manual configuration, currently only supports 72 frameworks. +Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +This step provides guidance for manually configuring native dependencies. Open the `harmony` directory of the HarmonyOS project in DevEco Studio. @@ -182,6 +185,8 @@ Method 2: Directly link to the source code. ### 3. Configuring CMakeLists and Introducing ClipboardPackage +> If you are using version <= 1.13.2-0.0.10, please skip this chapter. + Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff @@ -276,11 +281,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: - -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +Verified in the following versions. +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### Permission Requirements @@ -332,15 +337,15 @@ Open `entry/src/main/resources/base/element/string.json` and add the following c | setString | Set content of string type. You can use following code to set clipboard content | function | NO | iOS,Android | yes | | hasString | Returns whether the clipboard has content or is empty. | function | NO | iOS,Android | yes | | getImage | Get content of image in base64 string type, this method returns a Promise, so you can use following code to get clipboard content (ANDROID only) | function | NO | Android | no | -| getStrings | (iOS only) Get contents of string array type, this method returns a Promise, so you can use following code to get clipboard content | function | NO | iOS | yes | -| setStrings | (iOS only) Set content of string array type. You can use following code to set clipboard content | function | NO | iOS | yes | -| hasNumber | (iOS 14+ only) Returns whether the clipboard has a Number(UIPasteboardDetectionPatternNumber) content. Can check if there is a Number content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | -| hasImage | Returns whether the clipboard has a Image | function | NO | iOS | yes | -| hasUrl | (iOS only) Returns whether the clipboard has a URL content. Can check if there is a URL content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | -| hasWebUrl | (iOS 14+ only) Returns whether the clipboard has a WebURL(UIPasteboardDetectionPatternProbableWebURL) content. Can check if there is a WebURL content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | -| setImage | Set content of Image type.（base64 string） | function | NO | iOS | yes | -| getImageJPG | get base64 string of JPG Image | function | NO | iOS | yes | -| getImagePNG | get base64 string of PNG Image | function | NO | iOS | yes | +| getStrings | (iOS only) Get contents of string array type, this method returns a Promise, so you can use following code to get clipboard content | function | NO | iOS | yes | +| setStrings | (iOS only) Set content of string array type. You can use following code to set clipboard content | function | NO | iOS | yes | +| hasNumber | (iOS 14+ only) Returns whether the clipboard has a Number(UIPasteboardDetectionPatternNumber) content. Can check if there is a Number content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | +| hasImage | Returns whether the clipboard has a Image | function | NO | iOS | yes | +| hasUrl | (iOS only) Returns whether the clipboard has a URL content. Can check if there is a URL content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | +| hasWebUrl | (iOS 14+ only) Returns whether the clipboard has a WebURL(UIPasteboardDetectionPatternProbableWebURL) content. Can check if there is a WebURL content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | iOS | yes | +| setImage | Set content of Image type.（base64 string） | function | NO | iOS | yes | +| getImageJPG | get base64 string of JPG Image | function | NO | iOS | yes | +| getImagePNG | get base64 string of PNG Image | function | NO | iOS | yes | ## Known Issues diff --git a/en/react-native-clippath-capi.md b/en/react-native-clippath-capi.md index 20dc4ea1..501599f9 100644 --- a/en/react-native-clippath-capi.md +++ b/en/react-native-clippath-capi.md @@ -12,17 +12,19 @@

-> [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-clippath/tree/capi) +> [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-clippath) -The repository of this third-party library has been migrated to Gitcode and supports direct download from npm. The new package name is: @react-native-ohos/react-native-clippathview. The specific version ownership relationship is as follows: +## Installation and Usage -| Version | Package Name | Repository | Release | Support RN version | -| ---------- | ------------------------------------------------------------ | ---------- | ---------- | ---------- | -| 1.1.8@deprecated | @react-native-oh-tpl/react-native-clippathview | [Github](https://github.com/react-native-oh-library/react-native-clippath/tree/capi)|[Github Releases](https://github.com/react-native-oh-library/react-native-clippath/releases)|0.72 | -| 1.9.0 | @react-native-ohos/react-native-clippathview | [Gitcode](https://gitcode.com/openharmony-sig/rntpc_react-native-clippath/tree/br_rnoh0.77) |[Gitcode Releases]() | 0.77 | -| 1.2.0 | @react-native-ohos/react-native-clippathview | [Gitcode](https://gitcode.com/openharmony-sig/rntpc_react-native-clippath/tree/br_rnoh0.77) |[Gitcode Releases]() | 0.77 | +Please refer to the Releases page of the third-party library for the corresponding version information -## Installation and Usage +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | +| <= 1.1.8-0.1.6@deprecated | [@react-native-oh-tpl/react-native-clippathview Releases(deprecated)](https://github.com/react-native-oh-library/react-native-clippath/releases) | 0.72 | +| 3.6.11 | [@react-native-ohos/react-native-clippathview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-clippath/releases) | 0.72 | +| 3.6.14 | [@react-native-ohos/react-native-clippathview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-clippath/releases) | 0.77 | + +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: @@ -31,22 +33,12 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash - -# 0.72 -npm install @react-native-oh-tpl/react-native-clippathview - -# 0.77 npm install @react-native-ohos/react-native-clippathview ``` #### **yarn** ```bash - -# 0.72 -yarn add @react-native-oh-tpl/react-native-clippathview - -# 0.77 yarn add @react-native-ohos/react-native-clippathview ``` @@ -79,7 +71,7 @@ export default function index() { ## Link -Version >= @react-native-ohos/react-native-clippathview@1.1.9 now supports Autolink without requiring manual configuration, currently only supports 72 frameworks. Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-clippathview@3.6.11 now supports Autolink without requiring manual configuration, currently only supports 72 frameworks. Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md This step provides guidance for manually configuring native dependencies. @@ -107,15 +99,12 @@ Method 1 (recommended): Use the HAR file. > [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. -Open `entry/oh-package.json5` file and add the following dependencies: +Open `entry/oh-package.json5` file and add the following dependencies: ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - // 0.72 - "@react-native-oh-tpl/react-native-clippathview": "file:../../node_modules/@react-native-oh-tpl/react-native-clippathview/harmony/clipPath.har", - // 0.77 "@react-native-ohos/react-native-clippathview": "file:../../node_modules/@react-native-ohos/react-native-clippathview/harmony/clipPath.har", } ``` @@ -133,10 +122,11 @@ Method 2: Directly link to the source code. For details, see [Directly Linking Source Code](/en/link-source-code.md). - ### 3. Configuring CMakeLists and Introducing ClipPathViewPackage -Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: +> If you are using version <= 1.1.8-0.1.6, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff project(rnapp) @@ -149,11 +139,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_END: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ # 0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-clippathview/src/main/cpp" ./clippath) - -+ # 0.77 -+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-clippathview/src/main/cpp" ./clippath) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-clippathview/src/main/cpp" ./clipPath) # RNOH_END: manual_package_linking_1 add_library(rnoh_app SHARED @@ -169,7 +155,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) # RNOH_BEGIN: manual_package_linking_2 ``` -Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: ```diff #include "RNOH/PackageProvider.h" @@ -186,22 +172,18 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Introducing ClipPathPackage to ArkTS +### 4. Introducing ClipPathViewPackage to ArkTS -Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff ... -+ // 0.72 -+ import { ClipPathPackage } from '@react-native-oh-tpl/react-native-clippathview/ts'; - -+ // 0.77 -+ import { ClipPathPackage } from '@react-native-ohos/react-native-clippathview/ts'; ++ import { ClipPathViewPackage } from '@react-native-ohos/react-native-clippathview/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), -+ new ClipPathPackage(ctx), ++ new ClipPathViewPackage(ctx), ]; } ``` @@ -223,47 +205,49 @@ Then build and run the code. ### Compatibility -The following combinations have been verified: +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. + +Verified in the following versions. -1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.1.1.830; ROM: 6.0.0.112 SP12; -2. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -3. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; -## Properties +## Properties > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------------- | ------------------------------------------------------------ | ----------------- | -------- | ----------- | ----------------- | -| svgKey | Unique key. | string | No | Web | No | -| d | Path shape defined by a series of commands (SVG path data). | string | No | iOS/Android | Yes | -| viewBox | Defines the position and dimensions in user space. | Array(4) | No | iOS/Android | Yes | -| align | **align** of the **preserveAspectRatio** property. | string | No | iOS/Android | Yes | -| aspect | **meetOrSlice** of the **preserveAspectRatio** property. | meet/slice/none | No | iOS/Android | Yes | -| fillRule | Path fill rule. | nonzero/evenodd | No | iOS/Android | Yes | -| strokeWidth | Path stroke width. | number | No | iOS/Android | Yes | -| strokeCap | Shape of the ends of open paths. | butt/round/square | No | iOS/Android | Yes | -| strokeJoin | Shape used at corners of paths. | bevel/miter/round | No | iOS/Android | Yes | -| strokeMiter | Miter length when **strokeJoin** is **miter**. | number | No | iOS/Android | Yes | -| strokeStart | Percentage of the starting point of the **CAShapeLayer** stroke to the total path on iOS. The default value is **0**.| number | No | iOS/Android | Yes | -| strokeEnd | Percentage of the ending point of the **CAShapeLayer** stroke to the total path on iOS. The default value is **1**. If the value is less than or equal to that of **strokeStart**, no content is drawn.| number | No | iOS/Android | Yes | -| translateZ | Sets the positioning layer depth (similar to index). | number | No | iOS/Android | Yes | -| transX | Horizontal translation in a 2D plane. | number | No | iOS/Android | Yes | -| transY | Vertical translation in a 2D plane. | number | No | iOS/Android | Yes | -| transPercentageValue | Whether **transX** and **transY** use percentage values. | boolean | No | iOS/Android | Yes | -| rot | Rotation of an element around a specific point. | number | No | iOS/Android | Yes | -| rotOx | Horizontal position of the rotation origin. | number | No | iOS/Android | Yes | -| rotOy | Vertical position of the rotation origin. | number | No | iOS/Android | Yes | -| rotPercentageValue | Whether **rotOx** and **rotOy** use percentage values. | boolean | No | iOS/Android | Yes | -| sc | Uniform scaling of an element. | number | No | iOS/Android | Yes | -| scX | X-axis scaling. | number | No | iOS/Android | Yes | -| scY | Y-axis scaling. | number | No | iOS/Android | Yes | -| scO | Scaling origin point. | number | No | iOS/Android | Yes | -| scOx | Horizontal position of the scaling origin. | number | No | iOS/Android | Yes | -| scOy | Vertical position of the scaling origin. | number | No | iOS/Android | Yes | -| scPercentageValue | Whether **scO**, **scOx**, and **scOy** use percentage values. | boolean | No | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ----------- | ----------------- | +| svgKey | Unique key. | string | No | Web | No | +| d | Path shape defined by a series of commands (SVG path data). | string | No | iOS/Android | Yes | +| viewBox | Defines the position and dimensions in user space. | Array(4) | No | iOS/Android | Yes | +| align | **align** of the **preserveAspectRatio** property. | string | No | iOS/Android | Yes | +| aspect | **meetOrSlice** of the **preserveAspectRatio** property. | meet/slice/none | No | iOS/Android | Yes | +| fillRule | Path fill rule. | nonzero/evenodd | No | iOS/Android | Yes | +| strokeWidth | Path stroke width. | number | No | iOS/Android | Yes | +| strokeCap | Shape of the ends of open paths. | butt/round/square | No | iOS/Android | Yes | +| strokeJoin | Shape used at corners of paths. | bevel/miter/round | No | iOS/Android | Yes | +| strokeMiter | Miter length when **strokeJoin** is **miter**. | number | No | iOS/Android | Yes | +| strokeStart | Percentage of the starting point of the **CAShapeLayer** stroke to the total path on iOS. The default value is **0**. | number | No | iOS/Android | Yes | +| strokeEnd | Percentage of the ending point of the **CAShapeLayer** stroke to the total path on iOS. The default value is **1**. If the value is less than or equal to that of **strokeStart**, no content is drawn. | number | No | iOS/Android | Yes | +| translateZ | Sets the positioning layer depth (similar to index). | number | No | iOS/Android | Yes | +| transX | Horizontal translation in a 2D plane. | number | No | iOS/Android | Yes | +| transY | Vertical translation in a 2D plane. | number | No | iOS/Android | Yes | +| transPercentageValue | Whether **transX** and **transY** use percentage values. | boolean | No | iOS/Android | Yes | +| rot | Rotation of an element around a specific point. | number | No | iOS/Android | Yes | +| rotOx | Horizontal position of the rotation origin. | number | No | iOS/Android | Yes | +| rotOy | Vertical position of the rotation origin. | number | No | iOS/Android | Yes | +| rotPercentageValue | Whether **rotOx** and **rotOy** use percentage values. | boolean | No | iOS/Android | Yes | +| sc | Uniform scaling of an element. | number | No | iOS/Android | Yes | +| scX | X-axis scaling. | number | No | iOS/Android | Yes | +| scY | Y-axis scaling. | number | No | iOS/Android | Yes | +| scO | Scaling origin point. | number | No | iOS/Android | Yes | +| scOx | Horizontal position of the scaling origin. | number | No | iOS/Android | Yes | +| scOy | Vertical position of the scaling origin. | number | No | iOS/Android | Yes | +| scPercentageValue | Whether **scO**, **scOx**, and **scOy** use percentage values. | boolean | No | iOS/Android | Yes | ## Known Issues @@ -271,4 +255,4 @@ The following combinations have been verified: ## License -This project is licensed under [The MIT License (MIT)](https://github.com/Only-IceSoul/react-native-clippath/blob/main/LICENSE). \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/Only-IceSoul/react-native-clippath/blob/main/LICENSE). diff --git a/en/react-native-community-progress-view.md b/en/react-native-community-progress-view.md index 0890d9c8..c581d3e9 100644 --- a/en/react-native-community-progress-view.md +++ b/en/react-native-community-progress-view.md @@ -4,25 +4,22 @@

@react-native-community/progress-view

-> [!TIP] [Github address](https://github.com/react-native-oh-library/progress-view) - +> [!TIP] [Github address](https://github.com/react-native-oh-library/progress-view) ## Installation and Usage Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.4.2@deprecated | [@react-native-oh-tpl/progress-view Releases(deprecated)](https://github.com/react-native-oh-library/progress-view/releases) | 0.72 | -| 1.4.3 | [@react-native-ohos/progress-view Releases](https://gitcode.com/openharmony-sig/rntpc_progress-view/releases) | 0.72 | -| 1.5.0 | [@react-native-ohos/progress-view Releases](https://gitcode.com/openharmony-sig/rntpc_progress-view/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 1.4.2-0.0.8@deprecated | [@react-native-oh-tpl/progress-view Releases(deprecated)](https://github.com/react-native-oh-library/progress-view/releases) | 0.72 | +| 1.4.3 | [@react-native-ohos/progress-view Releases](https://gitcode.com/openharmony-sig/rntpc_progress-view/releases) | 0.72 | +| 1.5.0 | [@react-native-ohos/progress-view Releases](https://gitcode.com/openharmony-sig/rntpc_progress-view/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -53,7 +50,7 @@ export default function ProgressViewExample() { trackTintColor="blue" progress={0.7} /> - ) + ); } ``` @@ -114,7 +111,7 @@ Method 2: Directly link to the source code. ### 2.3 Configuring CMakeLists and Introducing ProgressViewPackage Package -> V1.4.3 requires configuring CMakeLists and importing ProgressViewPackage. +> If you are using version <= 1.4.2-0.0.8, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: @@ -129,7 +126,7 @@ 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/progress-view/src/main/cpp" ./progress-view) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/progress-view/src/main/cpp" ./progress_view) # RNOH_BEGIN: manual_package_linking_1 add_library(rnoh_app SHARED @@ -172,7 +169,7 @@ import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-packag @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { - ... + ... + if (ctx.componentName === PROGRESS_VIEW_TYPE) { + RNCProgressView({ + ctx: ctx.rnComponentContext, @@ -197,23 +194,22 @@ const arkTsComponentNames: Array = [ ]; ``` - > **[!TIP] Version 1.4.3 and above requires.** +### 2.4 Introducing ProgressViewPackage to ArkTS -Open the `entry/src/main/ets/RNPackagesFactory.ts`，file and add the following code: +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff - ... + import { ProgressViewPackage } from "@react-native-ohos/progress-view/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), -+ new ProgressViewPackage(ctx), ++ new ProgressViewPackage(ctx), ]; } ``` -### 2.4 Running +### 2.5 Running Click the `sync` button in the upper right corner. @@ -230,13 +226,13 @@ Then build and run the code. ### 3.1 Compatibility -To use this library, you need to use the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM. +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Verified successfully in the following versions: +Verified in the following versions. -1. RNOH: 0.72.96; SDK: HarmonyOS 5.1.0.150 (API Version 12); IDE: DevEco Studio 5.1.1.830; ROM: 5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; 2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; -3. RNOH: 0.77.18; SDK: HarmonyOS 5.0.0.71(API Version 12 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 5.1.0.150; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 4. Properties @@ -244,15 +240,15 @@ Verified successfully in the following versions: > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------- | ------------------------------------------ | ------ | -------- | -------- | ----------------- | -| `progress` | The progress value (between 0 and 1). | number | No | All | Yes | -| `progressTintColor` | The tint color of the progress bar itself. | string | No | All | Yes | -| `trackTintColor` | The tint color of the progress bar track. | string | No | All | Yes | -| `progressImage` | A stretchable image to display as the progress bar. | Image.propTypes.source | No | All | No | -| `trackImage` | A stretchable image to display behind the progress bar. Network images only work on Windows.| Image.propTypes.source | No | All | No | -| `progressViewStyle` | The progress bar style. Network images only work on Windows. | enum('default', 'bar') | No | All | No | -| `isIndeterminate` | Turns progress bar into an indeterminate progress bar. | bool | No | Windows | Partially | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | -------------------------------------------------------------------------------------------- | ---------------------- | -------- | -------- | ----------------- | +| `progress` | The progress value (between 0 and 1). | number | No | All | Yes | +| `progressTintColor` | The tint color of the progress bar itself. | string | No | All | Yes | +| `trackTintColor` | The tint color of the progress bar track. | string | No | All | Yes | +| `progressImage` | A stretchable image to display as the progress bar. | Image.propTypes.source | No | All | No | +| `trackImage` | A stretchable image to display behind the progress bar. Network images only work on Windows. | Image.propTypes.source | No | All | No | +| `progressViewStyle` | The progress bar style. Network images only work on Windows. | enum('default', 'bar') | No | All | No | +| `isIndeterminate` | Turns progress bar into an indeterminate progress bar. | bool | No | Windows | Partially | ## 5. Known Issues diff --git a/en/react-native-compass-heading.md b/en/react-native-compass-heading.md index 3b215653..8a696dc6 100644 --- a/en/react-native-compass-heading.md +++ b/en/react-native-compass-heading.md @@ -18,18 +18,16 @@ Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.5.0@deprecated | [@react-native-oh-tpl/react-native-compass-heading Releases(deprecated)](https://github.com/react-native-oh-library/react-native-compass-heading/releases) | 0.72 | -| 1.5.1 | [@react-native-ohos/react-native-compass-heading Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-compass-heading/releases) | 0.72 | -| 2.0.3 | [@react-native-ohos/react-native-compass-heading Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-compass-heading/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 1.5.0-0.0.2@deprecated | [@react-native-oh-tpl/react-native-compass-heading Releases(deprecated)](https://github.com/react-native-oh-library/react-native-compass-heading/releases) | 0.72 | +| 1.5.1 | [@react-native-ohos/react-native-compass-heading Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-compass-heading/releases) | 0.72 | +| 2.0.3 | [@react-native-ohos/react-native-compass-heading Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-compass-heading/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -163,7 +161,7 @@ Method 2: Directly link to the source code. ### 3. Configure CMakeLists and Import RNCompassHeadingPackage -> V1.5.1 requires configuring CMakeLists and importing RNCompassHeadingPackage. +> If you are using version <= 1.5.0-0.0.2, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt` and add: @@ -249,11 +247,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Verified successfully in the following versions: +Verified in the following versions. -1. RNOH: 0.72.96; SDK: HarmonyOS 5.1.0.150 (API Version 12); IDE: DevEco Studio 5.1.1.830; ROM: 5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; 2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; -3. RNOH: 0.77.18; SDK: HarmonyOS 5.0.0.71(API Version 12 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 5.1.0.150; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## Static Methods diff --git a/en/react-native-cookies-cookies.md b/en/react-native-cookies-cookies.md index 6b024843..2f1a44dc 100644 --- a/en/react-native-cookies-cookies.md +++ b/en/react-native-cookies-cookies.md @@ -12,24 +12,22 @@

-> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-cookies/tree/sig) +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-cookies) ## Installation and Usage Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 6.2.1@deprecated | [@react-native-oh-tpl/cookies Releases(deprecated)](https://github.com/react-native-oh-library/react-native-cookies/releases) | 0.72 | -| 6.2.2 | [@react-native-ohos/cookies Releases](https://gitcode.com/openharmony-sig/rntpc_cookies/releases) | 0.72 | -| 6.3.0 | [@react-native-ohos/cookies Releases](https://gitcode.com/openharmony-sig/rntpc_cookies/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 6.2.1-0.0.8@deprecated | [@react-native-oh-tpl/cookies Releases(deprecated)](https://github.com/react-native-oh-library/react-native-cookies/releases) | 0.72 | +| 6.2.2 | [@react-native-ohos/cookies Releases](https://gitcode.com/openharmony-sig/rntpc_cookies/releases) | 0.72 | +| 6.3.0 | [@react-native-ohos/cookies Releases](https://gitcode.com/openharmony-sig/rntpc_cookies/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -40,7 +38,7 @@ npm install @react-native-ohos/cookies #### **yarn** -``` +```bash yarn add @react-native-ohos/cookies ``` @@ -81,7 +79,9 @@ export interface Cookies { export default function CookiesPage() { const httpUrl = "https://www.baidu.com"; - const [result, setResult] = useState("Touch the button to perform the operation."); + const [result, setResult] = useState( + "Touch the button to perform the operation." + ); const webViewRef = useRef(null); return ( @@ -145,7 +145,7 @@ export default function CookiesPage() { }} > clearByName()【Delete cookies by name.】 - + [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. @@ -245,7 +244,7 @@ Method 2: Directly link to the source code. ### 3. Configuring CMakeLists and Introducing CookiesPackage -> V6.2.2 requires configuring CMakeLists and importing CookiesPackage +> If you are using version <= 6.2.1-0.0.8, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: @@ -331,13 +330,13 @@ Then build and run the code. ### Compatibility -To use this library, you need to use the correct React-Native and RNOH versions. Additionally, you need to use the matching DevEco Studio and phone ROM. +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Verified successfully in the following versions: +Verified in the following versions. -1. RNOH: 0.72.96; SDK: HarmonyOS 5.1.0.150 (API Version 12); IDE: DevEco Studio 5.1.1.830; ROM: 5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; 2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; -3. RNOH: 0.77.18; SDK: HarmonyOS 5.0.0.71(API Version 12 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 5.1.0.150; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## Static Methods @@ -345,17 +344,17 @@ Verified successfully in the following versions: > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------------- | --------------------------------------------- | ---------|----------| ------------|-------------------| -| clearAll | Clear all cookies |function | NO |iOS,Android | yes | -| get | Get cookies based on url |function | NO | iOS,Android | yes | -| set | Set cookie based on url |function | NO | iOS,Android | yes | -| clearByName | Delete cookies by name |function | NO | iOS | yes | -| flush | Refresh cookies |function | NO | Android | no | -| removeSessionCookies | Clear session cookies |function | NO | iOS,Android | yes | -| getAll | Get all cookies |function | NO | iOS | no | -| setFromResponse | Set cookies from a response header |function | NO | iOS | no | -| getFromResponse | Get cookies from a response header |function | NO | iOS | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ---------------------------------- | -------- | -------- | ----------- | ----------------- | +| clearAll | Clear all cookies | function | NO | iOS,Android | yes | +| get | Get cookies based on url | function | NO | iOS,Android | yes | +| set | Set cookie based on url | function | NO | iOS,Android | yes | +| clearByName | Delete cookies by name | function | NO | iOS | yes | +| flush | Refresh cookies | function | NO | Android | no | +| removeSessionCookies | Clear session cookies | function | NO | iOS,Android | yes | +| getAll | Get all cookies | function | NO | iOS | no | +| setFromResponse | Set cookies from a response header | function | NO | iOS | no | +| getFromResponse | Get cookies from a response header | function | NO | iOS | no | ## Known Issues diff --git a/en/react-native-exit-app.md b/en/react-native-exit-app.md index a9b718c5..2a5fbf0f 100644 --- a/en/react-native-exit-app.md +++ b/en/react-native-exit-app.md @@ -18,13 +18,13 @@ Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| ---------- | -| 2.0.0@deprecated | [@react-native-oh-tpl/react-native-exit-app Releases(deprecated)](https://github.com/react-native-oh-library/react-native-exit-app/releases) | 0.72 | -| 2.0.1 | [@react-native-ohos/react-native-exit-app Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-exit-app/releases) | 0.72 | -| 2.1.0 | [@react-native-ohos/react-native-exit-app Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-exit-app/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 2.0.0-0.0.1@deprecated | [@react-native-oh-tpl/react-native-exit-app Releases(deprecated)](https://github.com/react-native-oh-library/react-native-exit-app/releases) | 0.72 | +| 2.0.1 | [@react-native-ohos/react-native-exit-app Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-exit-app/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-exit-app Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-exit-app/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: @@ -136,7 +136,7 @@ Method 2: Directly Link Source Code ### 3. Configure CMakeLists and import ExitAppPackage -> V2.0.1 requires configuring CMakeLists and importing ExitAppPackage. +> If you are using version <= 2.0.0-0.0.1, please skip this chapter. Open the `entry/src/main/cpp/CMakeLists.txt` file and add the following code: @@ -178,7 +178,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) Open the `entry/src/main/cpp/PackageProvider.cpp` file and add the following code: -``` +```diff #include "RNOH/PackageProvider.h" #include "generated/RNOHGeneratedPackage.h" #include "SamplePackage.h" @@ -230,11 +230,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: +Verified in the following versions. -1. RNOH: 0.72.96; SDK: HarmonyOS 5.1.0.150 (API Version 12); IDE: DevEco Studio 5.1.1.830; ROM: 5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; 2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; -3. RNOH: 0.77.18; SDK: HarmonyOS 5.0.0.71(API Version 12 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 5.1.0.150; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## Static Methods @@ -242,8 +242,8 @@ The following combinations have been verified: > [!TIP]If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------- | ------------- | -------- | -------- | ----------- | ----------------- | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------- | -------------- | -------- | -------- | ----------- | ----------------- | | exitApp | close/exit APP | Function | no | iOS/Android | yes | ## Known Issues diff --git a/en/react-native-fast-image.md b/en/react-native-fast-image.md index 2eaa0d8f..6ba24874 100644 --- a/en/react-native-fast-image.md +++ b/en/react-native-fast-image.md @@ -18,18 +18,16 @@ Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| <= 8.6.3-0.4.17@deprecated | [@react-native-oh-tpl/react-native-fast-image Releases(deprecated)](https://github.com/react-native-oh-library/react-native-fast-image/releases) | 0.72 | -| 8.6.4 | [@react-native-ohos/react-native-fast-image Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-fast-image/releases) | 0.72 | -| 8.7.0 | [@react-native-ohos/react-native-fast-image Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-fast-image/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | +| <= 8.6.3-0.4.17@deprecated | [@react-native-oh-tpl/react-native-fast-image Releases(deprecated)](https://github.com/react-native-oh-library/react-native-fast-image/releases) | 0.72 | +| 8.6.4 | [@react-native-ohos/react-native-fast-image Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-fast-image/releases) | 0.72 | +| 8.7.0 | [@react-native-ohos/react-native-fast-image Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-fast-image/releases) | 0.77 | For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -161,7 +159,7 @@ For details, see [Directly Linking Source Code](/en/link-source-code.md). ### 3. Configuring CMakeLists and Introducing FastImagePackage -> V8.6.4 requires configuring CMakeLists and importing FastImagePackage +> If you are using version <= 8.6.3-0.4.17, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: @@ -183,7 +181,7 @@ 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/react-native-fast-image/src/main/cpp" ./fast-image) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-fast-image/src/main/cpp" ./fast_image) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -304,4 +302,3 @@ Verified in the following versions. ## License This project is licensed under [The MIT License (MIT)](https://github.com/DylanVann/react-native-fast-image/blob/main/LICENSE). - diff --git a/en/react-native-hole-view.md b/en/react-native-hole-view.md index 9a1280ba..dc2f8354 100644 --- a/en/react-native-hole-view.md +++ b/en/react-native-hole-view.md @@ -18,18 +18,16 @@ Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| <= 3.0.0-alpha4-0.0.5@deprecated | [@react-native-oh-tpl/react-native-hole-view Releases(deprecated)](https://github.com/react-native-oh-library/react-native-hole-view/releases) | 0.72 | -| 3.0.1 | [@react-native-ohos/react-native-hole-view Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-hole-view/releases) | 0.72 | -| 3.1.0 | [@react-native-ohos/react-native-hole-view Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-hole-view/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 3.0.0-alpha4-0.0.5@deprecated | [@react-native-oh-tpl/react-native-hole-view Releases(deprecated)](https://github.com/react-native-oh-library/react-native-hole-view/releases) | 0.72 | +| 3.0.1 | [@react-native-ohos/react-native-hole-view Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-hole-view/releases) | 0.72 | +| 3.1.0 | [@react-native-ohos/react-native-hole-view Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-hole-view/releases) | 0.77 | For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### npm @@ -194,9 +192,9 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3. Configuring CMakeLists and Introducing HoleViewPackage +### 3. Configuring CMakeLists and Introducing RNOHHoleViewPackage -> V3.0.1 requires configuring CMakeLists and importing HoleViewPackage +> If you are using version <= 3.0.0-alpha4-0.0.5, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: @@ -218,7 +216,7 @@ 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/react-native-hole-view/src/main/cpp" ./rnohkeys) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-hole-view/src/main/cpp" ./rnoh_holeview) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -242,7 +240,7 @@ Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: #include "RNOH/PackageProvider.h" #include "generated/RNOHGeneratedPackage.h" #include "SamplePackage.h" -+ #include "HoleViewPackage.h" ++ #include "RNOHHoleViewPackage.h" using namespace rnoh; @@ -255,7 +253,22 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Running +### 4. Introducing RNOHHoleViewPackage to ArkTS + +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: + +```diff ++ import {RNOHHoleViewPackage} from '@react-native-ohos/react-native-audio-recorder-player/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNOHHoleViewPackage(ctx) + ]; +} +``` + +### 5. Running Click the `sync` button in the upper right corner. diff --git a/en/react-native-image-marker.md b/en/react-native-image-marker.md index ab916a9e..f4dc34c3 100644 --- a/en/react-native-image-marker.md +++ b/en/react-native-image-marker.md @@ -16,20 +16,18 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: +Find the matching version information in the release address of a third-party library: -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.2.6@deprecated | [@react-native-oh-tpl/react-native-image-marker Releases(deprecated)](https://github.com/react-native-oh-library/react-native-image-marker/releases) | 0.72 | -| 1.2.7 | [@react-native-ohos/react-native-image-marker Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-marker/releases) | 0.72 | -| 1.3.0 | [@react-native-ohos/react-native-image-marker Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-marker/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 1.2.6-0.0.9@deprecated | [@react-native-oh-tpl/react-native-image-marker Releases(deprecated)](https://github.com/react-native-oh-library/react-native-image-marker/releases) | 0.72 | +| 1.2.7 | [@react-native-ohos/react-native-image-marker Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-marker/releases) | 0.72 | +| 1.3.0 | [@react-native-ohos/react-native-image-marker Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-image-marker/releases) | 0.77 | For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -262,7 +260,7 @@ Method 2: Directly link to the source code. ### 3.Configure CMakeLists and import RNImageMarkerPackage -> V1.2.7 requires configuring CMakeLists and importing RNImageMarkerPackage. +> If you are using version <= 1.2.6-0.0.9, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt`，and add： @@ -345,11 +343,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: +Verified in the following versions. -1. RNOH: 0.72.96; SDK: HarmonyOS 5.1.0.150 (API Version 12); IDE: DevEco Studio 5.1.1.830; ROM: 5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; 2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; -3. RNOH: 0.77.18; SDK: HarmonyOS 5.0.0.71(API Version 12 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 5.1.0.150; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### Permission Requirements diff --git a/en/react-native-incall-manager.md b/en/react-native-incall-manager.md index 2372a25a..23bf33b1 100644 --- a/en/react-native-incall-manager.md +++ b/en/react-native-incall-manager.md @@ -21,18 +21,16 @@ Please refer to the Releases page of the third-party library for the corresponding version information: -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 4.2.0@deprecated | [@react-native-oh-tpl/react-native-incall-manager Releases(deprecated)](https://github.com/react-native-oh-library/react-native-incall-manager/releases) | 0.72 | -| 4.2.1 | [@react-native-ohos/react-native-incall-manager Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-incall-manager/releases) | 0.72 | -| 4.2.2 | [@react-native-ohos/react-native-incall-manager Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-incall-manager/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 4.2.0-0.0.4@deprecated | [@react-native-oh-tpl/react-native-incall-manager Releases(deprecated)](https://github.com/react-native-oh-library/react-native-incall-manager/releases) | 0.72 | +| 4.2.1 | [@react-native-ohos/react-native-incall-manager Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-incall-manager/releases) | 0.72 | +| 4.2.2 | [@react-native-ohos/react-native-incall-manager Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-incall-manager/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -548,6 +546,8 @@ Method 2: Directly link to the source code. ### 3. Configuring CMakeLists and Introducing RNInCallManagerPackage +> If you are using version <= 4.2.0-0.0.4, please skip this chapter. + Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff @@ -637,13 +637,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Please refer to the Releases page of the third-party library for the corresponding version information: +Verified in the following versions. -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 4.2.0@deprecated | [@react-native-oh-tpl/react-native-incall-manager Releases(deprecated)](https://github.com/react-native-oh-library/react-native-incall-manager/releases) | 0.72 | -| 4.2.1 | [@react-native-ohos/react-native-incall-manager Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-incall-manager/releases) | 0.72 | -| 4.2.2 | [@react-native-ohos/react-native-incall-manager Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-incall-manager/releases) | 0.77 | +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### Permission Requirements @@ -703,30 +701,30 @@ Open `entry/src/main/resources/base/element/string.json` file and add: > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| vibrate | set vibrate true / false | boolean | no | all | yes | -| start | start incall manager.ringback accept non-empty string or it won't play default: \{media:'audio', auto: true, ringback: ''\} | (setup?: \{auto?: boolean;media?: "video" \| "audio";ringback?: string;\}) => void | no | all | yes | -| stop | stop incall manager,busytone accept non-empty string or it won't play,default: \{busytone: ''\} | (setup?: \{ busytone?: string \}) => void | no | all | partially | -| turnScreenOn | force turn screen on | () => void | no | Android | yes | -| turnScreenOff | turn screen off | () => void | no | Android | yes | -| setKeepScreenOn | set KeepScreenOn flag = true or false,default: false | (enable: boolean) => void | no | all | yes | -| setSpeakerphoneOn | toggle speaker ON/OFF once. but not force,default: false | (enable: boolean) => void | no | all | no | -| setForceSpeakerphoneOn | true -> force speaker on,false -> force speaker off,null -> use default behavior according to media type,default: null | (flag: boolean) => void | no | all | no | -| setMicrophoneMute | mute/unmute micophone,default: false,p.s. if you use webrtc, you can just use track.enabled = false to mute | (enable: boolean) => void | no | Android | no | -| getAudioUri | get audio Uri path. this would be useful when you want to pass Uri into another module. | (audioType: string, fileType: string) => Promise | no | all | yes | -| startRingtone | play ringtone.ringtone: 'DEFAULT' or 'BUNDLE',vibrate_pattern: same as RN, but does not support repeat,ios_category: ios only, if you want to use specific audio category,seconds: android only, specify how long do you want to play rather than play once nor repeat. in sec. | (ringtone: string,vibrate_pattern: number \| number\[],ios_category: string,seconds: number) => void | no | all | partially | -| stopRingtone | stop play ringtone if previous started via | () => void | no | all | yes | -| startRingback | play ringback.,ringback: '_DEFAULT_' or '_DTMF_' | (ringback: string) => void; | no | all | partially | -| stopRingback | stop play ringback if previous started via start() | () => void | no | all | yes | -| stopProximitySensor | stop ProximitySensor | () => void | no | all | yes | -| startProximitySensor | start proximitySensor | () => void | no | all | yes | -| pokeScreen | poke screen | (timeout: number) => void | no | Android | no | -| chooseAudioRoute | choose audio route | (route: string) => Promise | no | Android | no | -| requestAudioFocus | request audio focus | () => Promise | no | Android | no | -| abandonAudioFocus | abandon audio focus | () => Promise | no | Android | no | -| setFlashOn | set flash light on/off | (enable: boolean, brightness: number) => void | no | iOS | yes | -| getIsWiredHeadsetPluggedIn | return wired headset plugged in state | () => Promise<\{ isWiredHeadsetPluggedIn: boolean \}> | no | all | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| vibrate | set vibrate true / false | boolean | no | all | yes | +| start | start incall manager.ringback accept non-empty string or it won't play default: \{media:'audio', auto: true, ringback: ''\} | (setup?: \{auto?: boolean;media?: "video" \| "audio";ringback?: string;\}) => void | no | all | yes | +| stop | stop incall manager,busytone accept non-empty string or it won't play,default: \{busytone: ''\} | (setup?: \{ busytone?: string \}) => void | no | all | partially | +| turnScreenOn | force turn screen on | () => void | no | Android | yes | +| turnScreenOff | turn screen off | () => void | no | Android | yes | +| setKeepScreenOn | set KeepScreenOn flag = true or false,default: false | (enable: boolean) => void | no | all | yes | +| setSpeakerphoneOn | toggle speaker ON/OFF once. but not force,default: false | (enable: boolean) => void | no | all | no | +| setForceSpeakerphoneOn | true -> force speaker on,false -> force speaker off,null -> use default behavior according to media type,default: null | (flag: boolean) => void | no | all | no | +| setMicrophoneMute | mute/unmute micophone,default: false,p.s. if you use webrtc, you can just use track.enabled = false to mute | (enable: boolean) => void | no | Android | no | +| getAudioUri | get audio Uri path. this would be useful when you want to pass Uri into another module. | (audioType: string, fileType: string) => Promise | no | all | yes | +| startRingtone | play ringtone.ringtone: 'DEFAULT' or 'BUNDLE',vibrate_pattern: same as RN, but does not support repeat,ios_category: ios only, if you want to use specific audio category,seconds: android only, specify how long do you want to play rather than play once nor repeat. in sec. | (ringtone: string,vibrate_pattern: number \| number\[],ios_category: string,seconds: number) => void | no | all | partially | +| stopRingtone | stop play ringtone if previous started via | () => void | no | all | yes | +| startRingback | play ringback.,ringback: '_DEFAULT_' or '_DTMF_' | (ringback: string) => void; | no | all | partially | +| stopRingback | stop play ringback if previous started via start() | () => void | no | all | yes | +| stopProximitySensor | stop ProximitySensor | () => void | no | all | yes | +| startProximitySensor | start proximitySensor | () => void | no | all | yes | +| pokeScreen | poke screen | (timeout: number) => void | no | Android | no | +| chooseAudioRoute | choose audio route | (route: string) => Promise | no | Android | no | +| requestAudioFocus | request audio focus | () => Promise | no | Android | no | +| abandonAudioFocus | abandon audio focus | () => Promise | no | Android | no | +| setFlashOn | set flash light on/off | (enable: boolean, brightness: number) => void | no | iOS | yes | +| getIsWiredHeadsetPluggedIn | return wired headset plugged in state | () => Promise<\{ isWiredHeadsetPluggedIn: boolean \}> | no | all | yes | ### Event(Event Listening) @@ -739,7 +737,7 @@ Open `entry/src/main/resources/base/element/string.json` file and add: | Proximity | proximity sensor detected changes. | (data: \{'isNear': boolean\}) => void | no | all | yes | | WiredHeadset | fire when wired headset plug/unplug | (data: \{'isPlugged': boolean, 'hasMic': boolean, 'deviceName': string \}) => void | no | all | yes | | NoisyAudio | a hint for applications that audio is about to become 'noisy' due to a change in audio outputs. | () => void | no | Android | yes | -| MediaButton | when external device controler pressed button | (data: \{'eventText': string, 'eventCode': number \}) => void | no | Android | no | +| MediaButton | when external device controler pressed button | (data: \{'eventText': string, 'eventCode': number \}) => void | no | Android | no | | onAudioFocusChange | Called on the listener to notify it the audio focus for this listener has been changed. | (data: \{'eventText': string, 'eventCode': number }) => void | no | Android | yes | ## Known Issues diff --git a/en/react-native-masked-view-masked-view.md b/en/react-native-masked-view-masked-view.md index 0c047ed0..1c856884 100644 --- a/en/react-native-masked-view-masked-view.md +++ b/en/react-native-masked-view-masked-view.md @@ -18,18 +18,16 @@ Please refer to the Releases page of the third-party library for the corresponding version information: -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.2.10@deprecated | [@react-native-oh-tpl/masked-view Releases(deprecated)](https://github.com/react-native-oh-library/masked-view/releases) | 0.72 | -| 0.2.11 | [@react-native-ohos/masked-view Releases](https://gitcode.com/openharmony-sig/rntpc_masked-view/releases) | 0.72 | -| 0.3.3 | [@react-native-ohos/masked-view Releases](https://gitcode.com/openharmony-sig/rntpc_masked-view/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------- | +| <= 0.2.9-0.2.2@deprecated | [@react-native-oh-tpl/masked-view Releases(deprecated)](https://github.com/react-native-oh-library/masked-view/releases) | 0.72 | +| 0.2.11 | [@react-native-ohos/masked-view Releases](https://gitcode.com/openharmony-sig/rntpc_masked-view/releases) | 0.72 | +| 0.3.3 | [@react-native-ohos/masked-view Releases](https://gitcode.com/openharmony-sig/rntpc_masked-view/releases) | 0.77 | For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -55,63 +53,63 @@ The following code shows the basic use scenario of the repository: > [!WARNING] The name of the imported repository remains unchanged. ```js -import { StyleSheet, Text, View } from 'react-native'; -import MaskedView from '@react-native-masked-view/masked-view'; +import { StyleSheet, Text, View } from "react-native"; +import MaskedView from "@react-native-masked-view/masked-view"; const MaskedDemo = () => { - return ( - - Basic Mask - - } - > - - - - ) -} + return ( + + Basic Mask + + } + > + + + + ); +}; const styles = StyleSheet.create({ - maskedView: { - width:'100%', - height:'40%' - }, - maskElementView: { - backgroundColor: 'transparent', - alignItems: 'center', - width:'100%', - height:'100%', - justifyContent: 'center', - }, - maskElementText: { - color: Colors.black, - width:'100%', - height:60, - fontSize: 50, - fontWeight: 'bold', - }, - textView: { - fontSize: 20, - alignItems: 'center', - width:'100%', - height:40, - flexDirection: 'row', - justifyContent: 'center', - }, - text: { - color: Colors.darkChestnut, - fontSize: 8, - width:'100%', - height:40, - fontVariant: ['small-caps'], - fontWeight: 'bold', - }, + maskedView: { + width: "100%", + height: "40%", + }, + maskElementView: { + backgroundColor: "transparent", + alignItems: "center", + width: "100%", + height: "100%", + justifyContent: "center", + }, + maskElementText: { + color: Colors.black, + width: "100%", + height: 60, + fontSize: 50, + fontWeight: "bold", + }, + textView: { + fontSize: 20, + alignItems: "center", + width: "100%", + height: 40, + flexDirection: "row", + justifyContent: "center", + }, + text: { + color: Colors.darkChestnut, + fontSize: 8, + width: "100%", + height: 40, + fontVariant: ["small-caps"], + fontWeight: "bold", + }, }); -export default MaskedDemo +export default MaskedDemo; ``` ## Link @@ -138,7 +136,6 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: - Method 1 (recommended): Use the HAR file. > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 @@ -168,6 +165,8 @@ Method 2: Directly link to the source code. ### 3. Configuring CMakeLists and Introducing MaskedPackage +> If you are using version <= 0.2.9-0.2.2, please skip this chapter. + Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: ```diff @@ -188,7 +187,7 @@ 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/masked-view/src/main/cpp" ./masked-view) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/masked-view/src/main/cpp" ./masked_view) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -225,7 +224,22 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4. Running +### 4. Introducing MaskedPackage to ArkTS + +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: + +```diff ++ import {MaskedPackage} from '@react-native-ohos/masked-view/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new MaskedPackage(ctx) + ]; +} +``` + +### 5. Running Click the `sync` button in the upper right corner. @@ -244,17 +258,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.2.10@deprecated | [@react-native-oh-tpl/masked-view Releases(deprecated)](https://github.com/react-native-oh-library/masked-view/releases) | 0.72 | -| 0.2.11 | [@react-native-ohos/masked-view Releases](https://gitcode.com/openharmony-sig/rntpc_masked-view/releases) | 0.72 | -| 0.3.3 | [@react-native-ohos/masked-view Releases](https://gitcode.com/openharmony-sig/rntpc_masked-view/releases) | 0.77 | - -The content of this document has been verified based on the following versions: +Verified in the following versions. -1. RNOH: 0.72.98; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.906; ROM: NEXT.0.0.71; -2. RNOH：0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## Properties @@ -269,7 +277,6 @@ The content of this document has been verified based on the following versions: ## Known Issues - ## Others ## License diff --git a/en/react-native-randombytes.md b/en/react-native-randombytes.md index 12e005d8..5207e419 100644 --- a/en/react-native-randombytes.md +++ b/en/react-native-randombytes.md @@ -13,29 +13,25 @@

- - > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-randombytes) ## Installation and Usage Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -|-------| ------------------------------------------------------------ | ---------- | -| 3.6.1@deprecated | [@react-native-oh-tpl/react-native-randombytes Releases(deprecated)](https://github.com/react-native-oh-library/react-native-randombytes/releases) | 0.72 | -| 3.6.2 | [@react-native-ohos/react-native-randombytes Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-randombytes/releases) | 0.72 | -| 3.7.0 | [@react-native-ohos/react-native-randombytes Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-randombytes/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 3.6.1-0.0.4@deprecated | [@react-native-oh-tpl/react-native-randombytes Releases(deprecated)](https://github.com/react-native-oh-library/react-native-randombytes/releases) | 0.72 | +| 3.6.2 | [@react-native-ohos/react-native-randombytes Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-randombytes/releases) | 0.72 | +| 3.7.0 | [@react-native-ohos/react-native-randombytes Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-randombytes/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - -#### npm +#### npm ```bash npm install @react-native-ohos/react-native-randombytes @@ -51,60 +47,75 @@ yarn add @react-native-ohos/react-native-randombytes The following code shows the basic use scenario of the repository: ->[!WARNING] The name of the imported repository remains unchanged. +> [!WARNING] The name of the imported repository remains unchanged. ```tsx - import React, { useState } from "react"; -import { Text, TouchableOpacity, View, TextInput, StyleSheet } from 'react-native'; -import { randomBytes } from 'react-native-randombytes'; +import { + Text, + TouchableOpacity, + View, + TextInput, + StyleSheet, +} from "react-native"; +import { randomBytes } from "react-native-randombytes"; export default function randomBytesDemo(): JSX.Element { - - const [bytesString, setBytesString] = useState(''); - const [size, setSize] = useState('30'); - - const nativeRandom = () => { - randomBytes(Number(size), (err: any, bytes: any) => { - setBytesString(JSON.stringify(bytes)) - console.log(err); - }) - } - - const jsRandom = () => { - const bytes = randomBytes(Number(size)) - setBytesString(JSON.stringify(bytes)) - } - - return - - {bytesString} - - - { - setSize(s); - }}> - - - Native RandomBytes - + const [bytesString, setBytesString] = useState(""); + const [size, setSize] = useState("30"); + + const nativeRandom = () => { + randomBytes(Number(size), (err: any, bytes: any) => { + setBytesString(JSON.stringify(bytes)); + console.log(err); + }); + }; + + const jsRandom = () => { + const bytes = randomBytes(Number(size)); + setBytesString(JSON.stringify(bytes)); + }; + + return ( + + {bytesString} + + { + setSize(s); + }} + > + + Native RandomBytes - - RandomBytes - + RandomBytes + ); } const styles = StyleSheet.create({ - TextInput: { height: 40, borderColor: '#ccc', borderWidth: 1, borderRadius: 4, width: '90%' }, - btn: { borderRadius: 10, display: 'flex', justifyContent: 'center', alignItems: 'center', padding: 10, margin: 10, backgroundColor: 'blue' }, - btnText: { fontWeight: 'bold', color: '#fff', fontSize: 20 } + TextInput: { + height: 40, + borderColor: "#ccc", + borderWidth: 1, + borderRadius: 4, + width: "90%", + }, + btn: { + borderRadius: 10, + display: "flex", + justifyContent: "center", + alignItems: "center", + padding: 10, + margin: 10, + backgroundColor: "blue", + }, + btnText: { fontWeight: "bold", color: "#fff", fontSize: 20 }, }); - ``` ## Use Codegen @@ -163,7 +174,69 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing RandomBytesPackage to ArkTS +### 3. Configuring CMakeLists and Introducing RandomBytesPackage + +> If you are using version <= 3.6.1-0.0.4, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: + +```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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-randombytes/src/main/cpp" ./random_bytes) + +# 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_randombytes) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "RandomBytesPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4. Introducing RandomBytesPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: @@ -179,7 +252,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 5. Running Click the `sync` button in the upper right corner. @@ -196,9 +269,13 @@ Then build and run the code. ### Compatibility -This document is verified based on the following versions: -1. RNOH: 0.72.20-CAPI; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. + +Verified in the following versions. + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## API @@ -208,15 +285,13 @@ This document is verified based on the following versions: For details, see [react-native-randombytes](https://gitcode.com/openharmony-sig/rntpc_react-native-randombytes) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|----------------|-------------------------------| -- | -------- | ----------- | ----------------- | -| randombytes | generate secure random numbers. | function | No | IOS/Android | yes | -| seedSJCL | Add entropy to the pools. | function | No | IOS/Android | yes | - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ------------------------------- | -------- | -------- | ----------- | ----------------- | +| randombytes | generate secure random numbers. | function | No | IOS/Android | yes | +| seedSJCL | Add entropy to the pools. | function | No | IOS/Android | yes | ## Others ## License This project is licensed under [The MIT License (MIT)](https://github.com/mvayngrib/react-native-randombytes/blob/master/LICENSE). - diff --git a/en/react-native-restart.md b/en/react-native-restart.md index 030d5f0d..02413e3f 100644 --- a/en/react-native-restart.md +++ b/en/react-native-restart.md @@ -20,12 +20,12 @@ Please refer to the Releases page of the third-party library for the corresponding version information | Third-party Library Version | Release Information | Supported RN Version | -|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------| ---------- | -| 0.0.27@deprecated | [@react-native-oh-tpl/react-native-restart Releases(deprecated)](https://github.com/react-native-oh-library/react-native-restart/releases) | 0.72 | -| 0.0.28 | [@react-native-ohos/react-native-restart Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-restart/releases) | 0.72 | -| 0.1.0 | [@react-native-ohos/react-native-restart Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-restart/releases) | 0.77 | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | +| <=0.0.27-0.0.3@deprecated | [@react-native-oh-tpl/react-native-restart Releases(deprecated)](https://github.com/react-native-oh-library/react-native-restart/releases) | 0.72 | +| 0.0.28 | [@react-native-ohos/react-native-restart Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-restart/releases) | 0.72 | +| 0.1.0 | [@react-native-ohos/react-native-restart Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-restart/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: @@ -50,9 +50,9 @@ The following code shows the basic use scenario of the repository: > [!WARNING] The name of the imported repository remains unchanged. ```js -import React from 'react'; -import {Text, View, StyleSheet} from 'react-native'; -import RNRestart from 'react-native-restart'; +import React from "react"; +import { Text, View, StyleSheet } from "react-native"; +import RNRestart from "react-native-restart"; export default function RestartDemo() { return ( @@ -77,12 +77,11 @@ const styles = StyleSheet.create({ button: { paddingVertical: 6, paddingHorizontal: 12, - backgroundColor: 'hsl(193, 95%, 68%)', + backgroundColor: "hsl(193, 95%, 68%)", borderWidth: 2, - borderColor: 'hsl(193, 95%, 30%)', + borderColor: "hsl(193, 95%, 30%)", }, }); - ``` ## Use Codegen @@ -98,6 +97,7 @@ Version >= @react-native-ohos/react-native-restart@0.0.28 now supports Autolink This step provides guidance for manually configuring native dependencies. Open the `harmony` directory of the HarmonyOS project in DevEco Studio. + ### 1.Open `entry/oh-package.json5` file and add the following dependencies: ```json @@ -142,13 +142,13 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Configure CMakeLists and import BootSplashPackage +### 3. Configure CMakeLists and import RNRestartPackage -> V0.0.28 requires the configuration of CMakeLists and the introduction of RestartPackage. +> If you are using version <= 0.0.27-0.0.3, please skip this chapter. Open the `entry/src/main/cpp/CMakeLists.txt` file and add the following code: -```cmake +```diff project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) @@ -190,7 +190,7 @@ Open the `entry/src/main/cpp/PackageProvider.cpp`，file and add the following c #include "RNOH/PackageProvider.h" #include "generated/RNOHGeneratedPackage.h" #include "SamplePackage.h" -+ #include "RestartPackage.h" ++ #include "RNRestartPackage.h" using namespace rnoh; @@ -198,7 +198,7 @@ std::vector> PackageProvider::getPackages(Package::Cont return { std::make_shared(ctx), std::make_shared(ctx), -+ std::make_shared(ctx) ++ std::make_shared(ctx) }; } ``` @@ -214,7 +214,7 @@ import { SamplePackage } from "rnoh-sample-package/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ - new SamplePackage(ctx), + new SamplePackage(ctx), + new RNRestartPackage(ctx) ]; } @@ -226,10 +226,11 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: +Verified in the following versions. -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## Static Methods @@ -242,10 +243,11 @@ The following combinations have been verified: | restart | restart your react native project | Function | no | All | yes | | Restart | restart your react native project | Function | no | All | yes | | getReason | get the cause of the last restart | Function | no | All | yes | + ## Known Issues ## Others ## License -This project is licensed under [The MIT License (MIT)](https://github.com/avishayil/react-native-restart/blob/master/LICENSE) \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/avishayil/react-native-restart/blob/master/LICENSE) diff --git a/en/react-native-screenshot-prevent.md b/en/react-native-screenshot-prevent.md index 05c250e8..986e7b05 100644 --- a/en/react-native-screenshot-prevent.md +++ b/en/react-native-screenshot-prevent.md @@ -18,18 +18,16 @@ Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------| ---------- | -| 1.2.1@deprecated | [@react-native-oh-tpl/react-native-screenshot-prevent Releases(deprecated)](https://github.com/react-native-oh-library/react-native-screenshot-prevent/releases) | 0.72 | -| 1.2.2 | [@react-native-ohos/react-native-screenshot-prevent Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-screenshot-prevent/releases) | 0.72 | -| 1.3.0 | [@react-native-ohos/react-native-screenshot-prevent Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-screenshot-prevent/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 1.2.1-0.0.2@deprecated | [@react-native-oh-tpl/react-native-screenshot-prevent Releases(deprecated)](https://github.com/react-native-oh-library/react-native-screenshot-prevent/releases) | 0.72 | +| 1.2.2 | [@react-native-ohos/react-native-screenshot-prevent Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-screenshot-prevent/releases) | 0.72 | +| 1.3.0 | [@react-native-ohos/react-native-screenshot-prevent Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-screenshot-prevent/releases) | 0.77 | For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -76,7 +74,7 @@ useEffect(() => { ## Use Codegen -> [!TIP] Version >= 1.2.2 no need to execute Codegen +Version >= @react-native-ohos/react-native-screenshot-prevent@1.2.2, compatible with codegen-lib for generating bridge code. If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). @@ -129,7 +127,68 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing RNScreenShotPreventPackage to ArkTS +### 3. Configuring CMakeLists and Introducing RNScreenShotPreventPackage + +> If you are using version <= 1.2.1-0.0.2, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: + +```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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-screenshot-prevent/src/main/cpp" ./react_native_screenshot_prevent) +# 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_screenshot_prevent) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "RNScreenShotPreventPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4. Introducing RNScreenShotPreventPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: @@ -145,7 +204,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 5. Running Click the `sync` button in the upper right corner. @@ -164,10 +223,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: +Verified in the following versions. -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### Permission Requirements diff --git a/en/react-native-sensitive-info.md b/en/react-native-sensitive-info.md index 344c07c5..a41054ee 100644 --- a/en/react-native-sensitive-info.md +++ b/en/react-native-sensitive-info.md @@ -19,18 +19,16 @@ Template version: v0.2.2 Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 6.0.0@deprecated | [@react-native-oh-tpl/react-native-sensitive-info Releases(deprecated)](https://github.com/react-native-oh-library/react-native-sensitive-info/releases) | 0.72 | -| 6.0.1 | [@react-native-ohos/react-native-sensitive-info Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sensitive-info/releases) | 0.72 | -| 6.1.0 | [@react-native-ohos/react-native-sensitive-info Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sensitive-info/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 6.0.0-alpha.9-0.0.3@deprecated | [@react-native-oh-tpl/react-native-sensitive-info Releases(deprecated)](https://github.com/react-native-oh-library/react-native-sensitive-info/releases) | 0.72 | +| 6.0.1 | [@react-native-ohos/react-native-sensitive-info Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sensitive-info/releases) | 0.72 | +| 6.1.0 | [@react-native-ohos/react-native-sensitive-info Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sensitive-info/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - #### **npm** @@ -184,7 +182,68 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). -### 3. Introducing RNSensitiveInfoPackage to ArkTS +### 3. Configuring CMakeLists and Introducing RNSensitiveInfoPackage + +> If you are using version <= 6.0.0-alpha.9-0.0.3, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: + +```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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-sensitive-info/src/main/cpp" ./react_native_sensitive_info) +# 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_sensitive_info) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "RNSensitiveInfoPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4. Introducing RNSensitiveInfoPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: @@ -202,7 +261,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 5. Running Click the `sync` button in the upper right corner. @@ -221,10 +280,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: +Verified in the following versions. -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### Permission Requirements diff --git a/en/react-native-sensors.md b/en/react-native-sensors.md index c064fcb6..4c89a440 100644 --- a/en/react-native-sensors.md +++ b/en/react-native-sensors.md @@ -4,18 +4,19 @@

react-native-sensors

-This project is based on [react-native-sensors@7.2.1-rc.2](https://github.com/react-native-sensors/react-native-sensors/tree/v7.2.1-rc.2). +> [!TIP] [ GitHub address](https://github.com/react-native-sensors/react-native-sensors) -This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-sensors`, The version correspondence details are as follows: +## Installation and Usage -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 7.2.1@deprecated | [@react-native-oh-library/react-native-sensors Releases(deprecated)](https://github.com/react-native-oh-library/react-native-sensors/releases) | 0.72 | -| 7.2.3 | [@react-native-ohos/react-native-sensors Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sensors/releases) | 0.72 | -| 7.3.7 | [@react-native-ohos/react-native-sensors Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sensors/releases) | 0.77 | +Please refer to the Releases page of the third-party library for the corresponding version information +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 7.2.1@deprecated | [@react-native-oh-library/react-native-sensors Releases(deprecated)](https://github.com/react-native-oh-library/react-native-sensors/releases) | 0.72 | +| 7.2.3 | [@react-native-ohos/react-native-sensors Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sensors/releases) | 0.72 | +| 7.3.7 | [@react-native-ohos/react-native-sensors Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-sensors/releases) | 0.77 | -## Installation and Usage +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: @@ -43,97 +44,171 @@ react-native-sensors is used as an example. import React from "react"; import { Alert } from "react-native"; import { Subscription } from "rxjs"; -import { Button, View, Text, TextInput, StyleSheet } from 'react-native'; -import { accelerometer, gyroscope, magnetometer, barometer, orientation, gravity, setUpdateIntervalForType, setLogLevelForType } from 'react-native-sensors'; +import { Button, View, Text, TextInput, StyleSheet } from "react-native"; +import { + accelerometer, + gyroscope, + magnetometer, + barometer, + orientation, + gravity, + setUpdateIntervalForType, + setLogLevelForType, +} from "react-native-sensors"; export const App = () => { - const [value, setValue] = React.useState('15'); - const [sensors, setSensorsValue] = React.useState(''); - const [IsProintLog, setIsProintLog] = React.useState(true); - const setInterVal = () => { - if(!sensors) return - if (IsProintLog) { - setUpdateIntervalForType(sensors, value); - setIsProintLog(false) - let sensorsSubscription: Subscription; - switch (sensors) { - case 'accelerometer': - sensorsSubscription = accelerometer.subscribe(); - break; - case 'gyroscope': - sensorsSubscription = gyroscope.subscribe(); - break; - case 'magnetometer': - sensorsSubscription = magnetometer.subscribe(); - break; - case 'barometer': - sensorsSubscription = barometer.subscribe(); - break; - case 'orientation': - sensorsSubscription = orientation.subscribe(); - break; - case 'gravity': - sensorsSubscription = gravity.subscribe(); - break; - default: - } - const timer = setTimeout(() => { - sensorsSubscription.unsubscribe(); - clearTimeout(timer) - setIsProintLog(true) - }, 5000); - } - } - const setLogLevel0 = () => { - setLogLevelForType(sensors, 0) - } - const setLogLevel1 = () => { - setLogLevelForType(sensors, 1) + const [value, setValue] = React.useState("15"); + const [sensors, setSensorsValue] = React.useState(""); + const [IsProintLog, setIsProintLog] = React.useState(true); + const setInterVal = () => { + if (!sensors) return; + if (IsProintLog) { + setUpdateIntervalForType(sensors, value); + setIsProintLog(false); + let sensorsSubscription: Subscription; + switch (sensors) { + case "accelerometer": + sensorsSubscription = accelerometer.subscribe(); + break; + case "gyroscope": + sensorsSubscription = gyroscope.subscribe(); + break; + case "magnetometer": + sensorsSubscription = magnetometer.subscribe(); + break; + case "barometer": + sensorsSubscription = barometer.subscribe(); + break; + case "orientation": + sensorsSubscription = orientation.subscribe(); + break; + case "gravity": + sensorsSubscription = gravity.subscribe(); + break; + default: + } + const timer = setTimeout(() => { + sensorsSubscription.unsubscribe(); + clearTimeout(timer); + setIsProintLog(true); + }, 5000); } - const setLogLevel2 = () => { - setLogLevelForType(sensors, 2) + }; + const setLogLevel0 = () => { + setLogLevelForType(sensors, 0); + }; + const setLogLevel1 = () => { + setLogLevelForType(sensors, 1); + }; + const setLogLevel2 = () => { + setLogLevelForType(sensors, 2); + }; + const handleChangeText = (text: string) => { + if (!text) { + Alert.alert("Please enter the interval time and it cannot be empty!"); + return; } - const handleChangeText = (text:string) => { - if (!text) { - Alert.alert('Please enter the interval time and it cannot be empty!'); - return - } - const numericValue = text.replace(/[^0-9]/g, ""); - setValue(numericValue); - } - const styles = StyleSheet.create({ - divider: { - height: 1, - backgroundColor: '#CCCCCC', - marginVertical: 5, - } - }) - return ( - - Operation process: 1. Enter the interval time 2. Select the sensor type 3. Select the output log level 4. Click the log print button. Please ensure that the equipment is supported - - setUpdateIntervalForType Set the data collection frequency - - - - - - - - - - - - - - - - - - - + const numericValue = text.replace(/[^0-9]/g, ""); + setValue(numericValue); + }; + const styles = StyleSheet.create({ + divider: { + height: 1, + backgroundColor: "#CCCCCC", + marginVertical: 5, + }, + }); + return ( + + + Operation process: 1. Enter the interval time 2. Select the sensor type + 3. Select the output log level 4. Click the log print button. Please + ensure that the equipment is supported + + + setUpdateIntervalForType Set the data collection frequency + + + + + + + + + + + + + + + + - ) -} + + + + + + + + + + ); +}; export default App; ``` @@ -197,18 +272,42 @@ Method 2: Directly link to the source code. ### 2.3 Configuring CMakeLists and Introducing SensorsPackage Package -> **[!TIP] Version 7.2.2 and above requires.** +> If you are using version <= 7.2.1, please skip this chapter. Open entry/src/main/cpp/CMakeLists.txt and add the following code: ```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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-sensors/src/main/cpp" ./sensors) # 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_sensors) # RNOH_END: manual_package_linking_2 ``` @@ -230,6 +329,8 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` +### Introducing SensorsPackage to ArkTS + Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff @@ -263,8 +364,11 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +Verified in the following versions. + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### 3.2 Permission Requirements (If Any) @@ -280,20 +384,19 @@ gyroscope Required permissions: ohos.permission.GYROSCOPE > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------ | ------------ | ---------- | -------- | ----------- | ----------------- | -| accelerometer | accelerometer | Observable | no | ios/Android | yes | -| gyroscope | gyroscope | Observable | no | ios/Android | yes | -| magnetometer | magnetometer | Observable | no | ios/Android | yes | -| barometer | barometer | Observable | no | ios/Android | yes | -| orientation | orientation | Observable | no | ios/Android | yes | -| gravity | gravity | Observable | no | ios/Android | yes | -| setUpdateIntervalForType | setUpdateIntervalForType | function | no | ios/Android | yes | -| setLogLevelForType | setLogLevelForType | function | no | ios/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ------------------------ | ---------- | -------- | ----------- | ----------------- | +| accelerometer | accelerometer | Observable | no | ios/Android | yes | +| gyroscope | gyroscope | Observable | no | ios/Android | yes | +| magnetometer | magnetometer | Observable | no | ios/Android | yes | +| barometer | barometer | Observable | no | ios/Android | yes | +| orientation | orientation | Observable | no | ios/Android | yes | +| gravity | gravity | Observable | no | ios/Android | yes | +| setUpdateIntervalForType | setUpdateIntervalForType | function | no | ios/Android | yes | +| setLogLevelForType | setLogLevelForType | function | no | ios/Android | yes | ## 5. Known Issues - ## 6. License -This project is licensed under [The MIT License (MIT)](https://github.com/react-native-sensors/react-native-sensors/blob/master/LICENSE), Please enjoy and participate freely in open source. \ No newline at end of file +This project is licensed under [The MIT License (MIT)](https://github.com/react-native-sensors/react-native-sensors/blob/master/LICENSE), Please enjoy and participate freely in open source. diff --git a/en/react-native-signature-capture.md b/en/react-native-signature-capture.md index c6e80280..b669f7f7 100644 --- a/en/react-native-signature-capture.md +++ b/en/react-native-signature-capture.md @@ -13,29 +13,25 @@

- - > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-signature-capture) ## Installation and Usage Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.4.12@deprecated | [@react-native-oh-tpl/react-native-signature-capture Releases(deprecated)](https://github.com/react-native-oh-library/react-native-signature-capture/releases) | 0.72 | -| 0.4.13 | [@react-native-ohos/react-native-signature-capture Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-signature-capture/releases) | 0.72 | -| 0.5.0 | [@react-native-ohos/react-native-signature-capture Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-signature-capture/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 0.4.12@deprecated | [@react-native-oh-tpl/react-native-signature-capture Releases(deprecated)](https://github.com/react-native-oh-library/react-native-signature-capture/releases) | 0.72 | +| 0.4.13 | [@react-native-ohos/react-native-signature-capture Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-signature-capture/releases) | 0.72 | +| 0.5.0 | [@react-native-ohos/react-native-signature-capture Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-signature-capture/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - - -#### npm +#### npm ```bash npm install @react-native-ohos/react-native-signature-capture @@ -51,94 +47,99 @@ yarn add @react-native-ohos/react-native-signature-capture The following code shows the basic use scenario of the repository: ->[!WARNING] The name of the imported repository remains unchanged. +> [!WARNING] The name of the imported repository remains unchanged. ```tsx -var React = require('react'); -var ReactNative = require('react-native'); +var React = require("react"); +var ReactNative = require("react-native"); -var {Component} = React; +var { Component } = React; -var { - AppRegistry, - StyleSheet, - Text, - View, TouchableHighlight -} = ReactNative; +var { AppRegistry, StyleSheet, Text, View, TouchableHighlight } = ReactNative; -import SignatureCapture from 'react-native-signature-capture'; +import SignatureCapture from "react-native-signature-capture"; class RNSignatureExample extends Component { - render() { - return ( - - Signature Capture Extended - - - - { this.saveSign() } } > - Save - - - { this.resetSign() } } > - Reset - - - - - - ); - } - - saveSign() { - this.refs["sign"].saveImage(); - } - - resetSign() { - this.refs["sign"].resetImage(); - } - - _onSaveEvent(result) { - //result.encoded - for the base64 encoded png - //result.pathName - for the file path name - console.log(result); - } - _onDragEvent() { - // This callback will be called when the user enters signature - console.log("dragged"); - } + render() { + return ( + + + Signature Capture Extended{" "} + + + + + { + this.saveSign(); + }} + > + Save + + + { + this.resetSign(); + }} + > + Reset + + + + ); + } + + saveSign() { + this.refs["sign"].saveImage(); + } + + resetSign() { + this.refs["sign"].resetImage(); + } + + _onSaveEvent(result) { + //result.encoded - for the base64 encoded png + //result.pathName - for the file path name + console.log(result); + } + _onDragEvent() { + // This callback will be called when the user enters signature + console.log("dragged"); + } } const styles = StyleSheet.create({ - signature: { - flex: 1, - borderColor: '#000033', - borderWidth: 1, - }, - buttonStyle: { - flex: 1, justifyContent: "center", alignItems: "center", height: 50, - backgroundColor: "#eeeeee", - margin: 10 - } + signature: { + flex: 1, + borderColor: "#000033", + borderWidth: 1, + }, + buttonStyle: { + flex: 1, + justifyContent: "center", + alignItems: "center", + height: 50, + backgroundColor: "#eeeeee", + margin: 10, + }, }); -AppRegistry.registerComponent('RNSignatureExample', () => RNSignatureExample); - - +AppRegistry.registerComponent("RNSignatureExample", () => RNSignatureExample); ``` ## Use Codegen @@ -171,8 +172,6 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: - - Method 1 (recommended): Use the HAR file. > [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. @@ -201,10 +200,11 @@ Method 2: Directly link to the source code. ### 3. Configure CMakeLists and import RNBackgroundFetchPackage +> If you are using version <= 0.4.12, please skip this chapter. + open `entry/src/main/cpp/CMakeLists.txt`，add： ```diff - project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) @@ -222,10 +222,8 @@ 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/react-native-signature-capture/src/main/cpp" ./rnoh_signature_capture) -# V0.4.11 for RN0.77 -+ set(REACT_NATIVE_SIGNATURE_CAPTURE_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-signature-capture/src/main/cpp") -+ include_directories(${REACT_NATIVE_SIGNATURE_CAPTURE_CPP_DIR}) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -239,6 +237,7 @@ 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_signature_capture) # RNOH_END: manual_package_linking_2 ``` @@ -281,7 +280,7 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... ``` -> [!TIP] If the repository uses a mixed solution, the component name needs to be added. +> [!TIP] If the repository uses a mixed solution, the component name needs to be added. Find the constant `arkTsComponentNames` in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets` and add the component name to the array. @@ -329,23 +328,23 @@ Then build and run the code. To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -The following combinations have been verified: +Verified in the following versions. + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; - ## Properties > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. - | Name | Description | Type | Required | Platform | HarmonyOS Support | -|-------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|----------|-------------|-------------------| +| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------- | ----------- | ----------------- | | showBorder | If this props is made to false, it will hide the dashed border. | boolean | no | iOS | yes | | showNativeButtons | If this props is made to true, it will display the native buttons "Save" and "Reset".. | boolean | no | iOS/Android | yes | -| showTitleLabel | If this props is made to true, it will display the "x_ _ _ _ _ _ _ _ _ _ _" placeholder indicating where to sign. | boolean | no | iOS | yes | +| showTitleLabel | If this props is made to true, it will display the "x\_ \_ \_ \_ \_ \_ \_ \_ \_ \_ \_" placeholder indicating where to sign. | boolean | no | iOS | yes | | viewMode | "portrait" or "landscape" change the screen orientation based on boolean value | "portrait" \| "landscape" | no | iOS/Android | yes | | maxSize | sets the max size of the image maintains aspect ratio, default is 500 | number | no | iOS/Android | yes | | minStrokeWidth | sets the min stroke line width | number | no | Android | yes | @@ -362,13 +361,11 @@ The following combinations have been verified: > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. - | Name | Description | Type | Required | Platform | HarmonyOS Support | -|------------|-----------------------------------------------------------------------------------------------------|----------|----------|-------------|-------------------| +| ---------- | --------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | | saveImage | when called it will save the image and returns the base 64 encoded string on onSaveEvent() callback | function | no | iOS/Android | yes | | resetImage | when called it will clear the image on the canvas | function | no | iOS/Android | yes | - ## Known Issues ## Others @@ -376,4 +373,3 @@ The following combinations have been verified: ## License This project is licensed under [The MIT License (MIT)](https://github.com/RepairShopr/react-native-signature-capture/blob/master/LICENSE). - diff --git a/en/react-native-touch-id.md b/en/react-native-touch-id.md index 7eeda52e..df8d5ba4 100644 --- a/en/react-native-touch-id.md +++ b/en/react-native-touch-id.md @@ -18,17 +18,16 @@ Please refer to the Releases page of the third-party library for the corresponding version information -| Third-party Library Version | Release Information | Supported RN Version | -|-------| ------------------------------------------------------------ | ---------- | -| 4.4.1@deprecated | [@react-native-oh-tpl/react-native-touch-id Releases(deprecated)](https://github.com/react-native-oh-library/react-native-touch-id/releases) | 0.72 | -| 4.4.2 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.72 | -| 4.5.0 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 4.4.1-0.0.3@deprecated | [@react-native-oh-tpl/react-native-touch-id Releases(deprecated)](https://github.com/react-native-oh-library/react-native-touch-id/releases) | 0.72 | +| 4.4.2 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.72 | +| 4.5.0 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.77 | -For older versions not published on npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +For older versions not published on npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. Go to the project directory and execute the following instruction: - #### **npm** @@ -50,40 +49,50 @@ The following code shows the basic use scenario of the repository: > [!WARNING] The name of the imported repository remains unchanged. ```js -import React, { Component, useState } from 'react'; -import { Alert, View, Button, Text } from 'react-native'; -import TouchID from 'react-native-touch-id'; +import React, { Component, useState } from "react"; +import { Alert, View, Button, Text } from "react-native"; +import TouchID from "react-native-touch-id"; const App = () => { - const [result, setResult] = useState('') + const [result, setResult] = useState < string > ""; return ( - - {result} - - - ) + ); }; export default App; - ``` + ## Use Codegen Version >= @react-native-ohos/react-native-touch-id@4.4.2, compatible with codegen-lib for generating bridge code. @@ -113,8 +122,6 @@ Open the `harmony` directory of the HarmonyOS project in DevEco Studio. Currently, two methods are available: - - Method 1 (recommended): Use the HAR file. > [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. @@ -141,8 +148,68 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). +### 3. Configuring CMakeLists and Introducing TouchIdPackage + +> If you are using version <= 4.4.1-0.0.3, please skip this chapter. + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: + +```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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-touch-id/src/main/cpp" ./touch_id) +# 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_touch_id) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "TouchIdPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` -### 3. Introducing TouchIdPackage to ArkTS +### 4. Introducing TouchIdPackage to ArkTS Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: @@ -158,7 +225,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4. Running +### 5. Running Click the `sync` button in the upper right corner. @@ -175,16 +242,13 @@ Then build and run the code. ### Compatibility - To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. -Please refer to the Releases page of the third-party library for the corresponding version information +Verified in the following versions. -| Third-party Library Version | Release Information | Supported RN Version | -|-------| ------------------------------------------------------------ | ---------- | -| 4.4.1@deprecated | [@react-native-oh-tpl/react-native-touch-id Releases(deprecated)](https://github.com/react-native-oh-library/react-native-touch-id/releases) | 0.72 | -| 4.4.2 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.72 | -| 4.5.0 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.77 | +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### Permission Requirements @@ -208,10 +272,11 @@ In your `module.json5` > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| isSupported | Whether touchid is supported | function | yes | ios/andriod | yes | -| authenticate | Verify touchid | function | yes | ios/andriod | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ---------------------------- | -------- | -------- | ----------- | ----------------- | +| isSupported | Whether touchid is supported | function | yes | ios/andriod | yes | +| authenticate | Verify touchid | function | yes | ios/andriod | yes | + ## Properties > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. @@ -220,22 +285,23 @@ In your `module.json5` ### Errors -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| Touch ID Error | Permission verification failed | string | no | harmonry | yes | -| Touch ID Error | Incorrect parameters | string | no | harmonry | yes | -| Touch ID Error | Authentication failed | string | no | harmonry | yes | -| Touch ID Error | The operation is canceled | string | no | harmonry | yes | -| Touch ID Error | The operation is time-out | string | no | harmonry | yes | -| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | -| Touch ID Error | The authentication trust level is not supported | string | no | harmonry | yes | -| Touch ID Error | The authentication task is busy | string | no | harmonry | yes | -| Touch ID Error | The authenticator is locked | string | no | harmonry | yes | -| Touch ID Error | General operation error | string | no | harmonry | no | -| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | -| Touch ID Error | The type of credential has not been enrolled | string | no | harmonry | yes | -| Touch ID Error | The authentication is canceled from widget's navigation button | string | no | harmonry | yes | -| Touch ID Error | Indicates that current authentication failed because of PIN expired | string | no | harmonry | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | ------------------------------------------------------------------- | ------ | -------- | -------- | ----------------- | +| Touch ID Error | Permission verification failed | string | no | harmonry | yes | +| Touch ID Error | Incorrect parameters | string | no | harmonry | yes | +| Touch ID Error | Authentication failed | string | no | harmonry | yes | +| Touch ID Error | The operation is canceled | string | no | harmonry | yes | +| Touch ID Error | The operation is time-out | string | no | harmonry | yes | +| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | +| Touch ID Error | The authentication trust level is not supported | string | no | harmonry | yes | +| Touch ID Error | The authentication task is busy | string | no | harmonry | yes | +| Touch ID Error | The authenticator is locked | string | no | harmonry | yes | +| Touch ID Error | General operation error | string | no | harmonry | no | +| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | +| Touch ID Error | The type of credential has not been enrolled | string | no | harmonry | yes | +| Touch ID Error | The authentication is canceled from widget's navigation button | string | no | harmonry | yes | +| Touch ID Error | Indicates that current authentication failed because of PIN expired | string | no | harmonry | yes | + ## Known Issues ## Others diff --git a/en/react-native-track-player.md b/en/react-native-track-player.md index 60dcabca..1f6b5a51 100644 --- a/en/react-native-track-player.md +++ b/en/react-native-track-player.md @@ -16,11 +16,11 @@ Please refer to the Releases page of the third-party library for the corresponding version information: -| Third-party Library Version | Release Information | Supported RN Version | -| ---------- | ------------------------------------------------------------ | ---------- | -| 4.1.2@deprecated | [@react-native-oh-tpl/react-native-track-player Releases(deprecated)](https://github.com/react-native-oh-library/react-native-track-player/releases) | 0.72 | -| 4.1.3 | [@react-native-ohos/react-native-track-player Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-track-player/releases) | 0.72 | -| 4.2.0 | [@react-native-ohos/react-native-track-player Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-track-player/releases) | 0.77 | +| Third-party Library Version | Release Information | Supported RN Version | +| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| <= 4.1.2@deprecated | [@react-native-oh-tpl/react-native-track-player Releases(deprecated)](https://github.com/react-native-oh-library/react-native-track-player/releases) | 0.72 | +| 4.1.3 | [@react-native-ohos/react-native-track-player Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-track-player/releases) | 0.72 | +| 4.2.0 | [@react-native-ohos/react-native-track-player Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-track-player/releases) | 0.77 | For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. @@ -182,13 +182,13 @@ Method 2: Directly link to the source code. > [!TIP] For details, see [Directly Linking Source Code](/zh-cn/link-source-code.md). -### 3.Configure CMakeLists and Introduce TrackPlayerPackage +### 3.Configure CMakeLists and Introduce RNTrackPlayerPackage -> [!TIP] If you are using version 4.1.2, please skip this chapter. +> If you are using version <= 4.1.2, please skip this chapter. Open `entry/src/main/cpp/CMakeLists.txt` and add: -```cmake +```diff project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) @@ -206,7 +206,7 @@ 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/react-native-track-player/src/main/cpp" ./track-player) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-track-player/src/main/cpp" ./track_player) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -230,7 +230,7 @@ Open `entry/src/main/cpp/PackageProvider.cpp` and add： #include "RNOH/PackageProvider.h" #include "generated/RNOHGeneratedPackage.h" #include "SamplePackage.h" -+ #include "TrackPlayerPackage.h" ++ #include "RNTrackPlayerPackage.h" using namespace rnoh; @@ -238,7 +238,7 @@ std::vector> PackageProvider::getPackages(Package::Cont return { std::make_shared(ctx), std::make_shared(ctx), -+ std::make_shared(ctx) ++ std::make_shared(ctx) }; } ``` @@ -276,10 +276,13 @@ Then build and run the code. ### Compatibility -This document is verified based on the following versions: +To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. + +Verified in the following versions. -1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; -2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### Permission Requirements @@ -350,14 +353,14 @@ Open the `entry/src/main/module.json5` file and add the following code: | getTrack | Gets a track object from the queue. | promise | no | Android/iOS | yes | | getQueue | Gets the whole queue. | promise | no | Android/iOS | yes | | getActiveTrackIndex | Gets the index of the active track in the queue or undefined if there is no current track. | promise | no | Android/iOS | yes | -| getCurrentTrack | Gets the index of the active track in the queue or undefined if there is no current track.(Recommend using getActiveTrackIndex() to obtain.) | promise | no | Android/iOS | yes | +| getCurrentTrack | Gets the index of the active track in the queue or undefined if there is no current track.(Recommend using getActiveTrackIndex() to obtain.) | promise | no | Android/iOS | yes | | getActiveTrack | Gets the active track or undefined if there is no current track. | promise | no | Android/iOS | yes | | getDuration | Gets the duration of the current track in seconds. | promise | no | Android/iOS | yes | -| getBufferedPosition | Gets the buffered position of the current track in seconds. | promise | no | Android/iOS | no | +| getBufferedPosition | Gets the buffered position of the current track in seconds. | promise | no | Android/iOS | no | | getPosition | Gets the playback position of the current track in seconds. | promise | no | Android/iOS | yes | | getProgress | Gets information on the progress of the currently active track, including its current playback position in seconds, buffered position in seconds and duration in seconds. | promise | no | Android/iOS | yes | | getPlaybackState | Gets the playback state of the player. | promise | no | Android/iOS | partially | -| getState | Gets the playback state of the player. (Recommend using getPlaybackState() to obtain playback status.) | promise | no | Android/iOS | partially | +| getState | Gets the playback state of the player. (Recommend using getPlaybackState() to obtain playback status.) | promise | no | Android/iOS | partially | | getRepeatMode | Gets the queue repeat mode. | promise | no | Android/iOS | yes | | retry | Retries the current item when the playback state is `State.Error`. | promise | no | Android/iOS | yes | diff --git a/zh-cn/react-native-ble-plx.md b/zh-cn/react-native-ble-plx.md index f94f481c..f8d3f29a 100644 --- a/zh-cn/react-native-ble-plx.md +++ b/zh-cn/react-native-ble-plx.md @@ -18,13 +18,13 @@ 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 3.2.0@deprecated | [@react-native-oh-tpl/react-native-ble-plx Releases(deprecated)](https://github.com/react-native-oh-library/react-native-ble-plx/releases) | 0.72 | -| 3.2.1 | [@react-native-ohos/react-native-ble-plx Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-ble-plx/releases) | 0.72 | -| 3.5.1 | [@react-native-ohos/react-native-ble-plx Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-ble-plx/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | +| <= 3.2.0-0.0.4@deprecated | [@react-native-oh-tpl/react-native-ble-plx Releases(deprecated)](https://github.com/react-native-oh-library/react-native-ble-plx/releases) | 0.72 | +| 3.2.1 | [@react-native-ohos/react-native-ble-plx Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-ble-plx/releases) | 0.72 | +| 3.5.1 | [@react-native-ohos/react-native-ble-plx Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-ble-plx/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： @@ -211,13 +211,13 @@ export default App; ## 使用 Codegen -Version >= @react-native-ohos/react-native-ble-plx@3.2.1，已适配codegen-lib生成桥接代码。 +Version >= @react-native-ohos/react-native-ble-plx@3.2.1，已适配 codegen-lib 生成桥接代码。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -Version >= @react-native-ohos/react-native-ble-plx@3.2.1，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-ble-plx@3.2.1，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 @@ -267,7 +267,69 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 BlePlxPackage +### 3.配置 CMakeLists 和引入 BlePlxPackage + +> 若使用的是 <= 3.2.0-0.0.4 版本，请跳过本章。 + +打开 `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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-ble-plx/src/main/cpp" ./rn_bleplx) + +# 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_ble_plx) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "BlePlxPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 BlePlxPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： @@ -283,7 +345,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -302,14 +364,17 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +在以下版本验证通过： + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### 权限要求 -- 由于此库涉及蓝牙系统控制功能，使用对应接口时则需要配置对应的权限，权限需配置在entry/src/main目录下module.json5文件中。其中部分权限需弹窗向用户申请授权。具体权限配置见文档：[程序访问控制](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/Readme-CN.md#/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/app-permission-mgmt-overview.md)。 +- 由于此库涉及蓝牙系统控制功能，使用对应接口时则需要配置对应的权限，权限需配置在 entry/src/main 目录下 module.json5 文件中。其中部分权限需弹窗向用户申请授权。具体权限配置见文档：[程序访问控制](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/Readme-CN.md#/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/app-permission-mgmt-overview.md)。 -- 此库部分功能与接口需要normal权限：ohos.permission.ACCESS_BLUETOOTH。 +- 此库部分功能与接口需要 normal 权限：ohos.permission.ACCESS_BLUETOOTH。 ## API @@ -317,57 +382,57 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| createClient(restoreStateIdentifier?: string) | creat client | void | No | iOS/Android | yes | -| destroyClient() | remove client | Promise | No | iOS/Android | yes | -| cancelTransaction(transactionId: string) | cancel transcation | Promise | No | iOS/Android | no | -| setLogLevel(logLevel: string) | set log level | Promise | No | iOS/Android | no | -| logLevel() | show log level | Promise | No | iOS/Android | no | -| enable(transactionId: string) | can get transaction Id | Promise | No | iOS/Android | yes | -| disable(transactionId: string) | cannot get transaction Id | Promise | No | iOS/Android | yes | -| state() | bluetooth state | Promise | No | iOS/Android | yes | -| startDeviceScan(filteredUUIDs: string[], options: Object) | start scan device | Promise| No | iOS/Android | yes | -| stopDeviceScan() | stop scan device | Promise | No | iOS/Android | yes | -| requestConnectionPriorityForDevice(deviceId: string, connectionPriority: number,transactionId: string) | request connect priority device | Promise | No | iOS/Android | no | -| readRSSIForDevice(deviceId: string, transactionId: string) | read RSSI device | Promise | No | iOS/Android | yes | -| requestMTUForDevice(deviceId: string, mtu: number, transactionId: string) | request MTU device | Promise | No | iOS/Android | yes | -| devices(deviceIdentifiers: string[]) | identify devices | Promise | No | iOS/Android | yes | -| connectedDevices(serviceUUIDs: string[]) | connect devices | Promise | No | iOS/Android | yes | -| connectToDevice(deviceId: string, options?: Object) | option to connect device | Promise | No | iOS/Android | yes | -| cancelDeviceConnection(deviceId: string) | cancel device connection | Promise | No | iOS/Android | yes | -| isDeviceConnected(deviceId: string) | connected device | Promise | No | iOS/Android | yes | -| discoverAllServicesAndCharacteristicsForDevice(deviceId: string, transactionId: string) | discover all device service and characteristics | Promise | No | iOS/Android | yes | -| servicesForDevice(deviceId: string) | device service | Promise | No | iOS/Android | yes | -| characteristicsForDevice(deviceId: string, serviceUUID: string) | device characteristics | Promise | No | iOS/Android | yes | -| characteristicsForService(serviceIdentifier: number) | service characteristics | Promise | No | iOS/Android | yes | -| descriptorsForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string): Promise | device descriptors | Promise | No | iOS/Android | yes | -| descriptorsForService(serviceIdentifier: number, characteristicUUID: string) | service descriptors | Promise | No | iOS/Android | yes | -| descriptorsForCharacteristic(characteristicIdentifier: number) |descriptors identifier device characteristic | Promise | No | iOS/Android | yes | -| readCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, transactionId: string) | read device characteristic | Promise | No | iOS/Android | yes | -| readCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | read service charcteristic | Promise | No | iOS/Android | yes | -| readCharacteristic(characteristicIdentifier: number, transactionId: string) | read identifier characteristic | Promise | No | iOS/Android | yes | -| writeCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write device characteristic | Promise | No | iOS/Android | yes | -| writeCharacteristicForService(serviceIdentifier: number, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write service characteristic | Promise | No | iOS/Android | yes | -| writeCharacteristic(characteristicIdentifier: number, valueBase64: string, response: boolean,transactionId: string) | write identifier characteristic | Promise | No | iOS/Android | yes | -| monitorCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string,transactionId: string) | monitor device characteristic | Promise | No | iOS/Android | yes | -| monitorCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | monitor service characteristic | Promise | No | iOS/Android | yes | -| monitorCharacteristic(characteristicIdentifier: number, transactionId: string) | monitor identifier characteristic | Promise | No | iOS/Android | yes | -| readDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read device descriptor | Promise | No | iOS/Android | yes | -| readDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read service descriptor | Promise | No | iOS/Android | yes | -| readDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string,transactionId: string) | read identifier characteristic descriptor | Promise | No | iOS/Android | yes | -| readDescriptor(descriptorIdentifier: number, transactionId: string) | read identifier descriptor | Promise | No | iOS/Android | yes | -| writeDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write device descriptor | Promise | No | iOS/Android | yes | -| writeDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write service descriptor | Promise | No | iOS/Android | yes | -| writeDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string, valueBase64: string,transactionId: string) | write identifier characteristic descriptor | Promise | No | iOS/Android | yes | -| writeDescriptor(descriptorIdentifier: number, valueBase64: string, transactionId: string) | write identifier descriptor | Promise | No | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ----------------- | -------- | ----------- | ----------------- | +| createClient(restoreStateIdentifier?: string) | creat client | void | No | iOS/Android | yes | +| destroyClient() | remove client | Promise | No | iOS/Android | yes | +| cancelTransaction(transactionId: string) | cancel transcation | Promise | No | iOS/Android | no | +| setLogLevel(logLevel: string) | set log level | Promise | No | iOS/Android | no | +| logLevel() | show log level | Promise | No | iOS/Android | no | +| enable(transactionId: string) | can get transaction Id | Promise | No | iOS/Android | yes | +| disable(transactionId: string) | cannot get transaction Id | Promise | No | iOS/Android | yes | +| state() | bluetooth state | Promise | No | iOS/Android | yes | +| startDeviceScan(filteredUUIDs: string[], options: Object) | start scan device | Promise | No | iOS/Android | yes | +| stopDeviceScan() | stop scan device | Promise | No | iOS/Android | yes | +| requestConnectionPriorityForDevice(deviceId: string, connectionPriority: number,transactionId: string) | request connect priority device | Promise | No | iOS/Android | no | +| readRSSIForDevice(deviceId: string, transactionId: string) | read RSSI device | Promise | No | iOS/Android | yes | +| requestMTUForDevice(deviceId: string, mtu: number, transactionId: string) | request MTU device | Promise | No | iOS/Android | yes | +| devices(deviceIdentifiers: string[]) | identify devices | Promise | No | iOS/Android | yes | +| connectedDevices(serviceUUIDs: string[]) | connect devices | Promise | No | iOS/Android | yes | +| connectToDevice(deviceId: string, options?: Object) | option to connect device | Promise | No | iOS/Android | yes | +| cancelDeviceConnection(deviceId: string) | cancel device connection | Promise | No | iOS/Android | yes | +| isDeviceConnected(deviceId: string) | connected device | Promise | No | iOS/Android | yes | +| discoverAllServicesAndCharacteristicsForDevice(deviceId: string, transactionId: string) | discover all device service and characteristics | Promise | No | iOS/Android | yes | +| servicesForDevice(deviceId: string) | device service | Promise | No | iOS/Android | yes | +| characteristicsForDevice(deviceId: string, serviceUUID: string) | device characteristics | Promise | No | iOS/Android | yes | +| characteristicsForService(serviceIdentifier: number) | service characteristics | Promise | No | iOS/Android | yes | +| descriptorsForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string): Promise | device descriptors | Promise | No | iOS/Android | yes | +| descriptorsForService(serviceIdentifier: number, characteristicUUID: string) | service descriptors | Promise | No | iOS/Android | yes | +| descriptorsForCharacteristic(characteristicIdentifier: number) | descriptors identifier device characteristic | Promise | No | iOS/Android | yes | +| readCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, transactionId: string) | read device characteristic | Promise | No | iOS/Android | yes | +| readCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | read service charcteristic | Promise | No | iOS/Android | yes | +| readCharacteristic(characteristicIdentifier: number, transactionId: string) | read identifier characteristic | Promise | No | iOS/Android | yes | +| writeCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write device characteristic | Promise | No | iOS/Android | yes | +| writeCharacteristicForService(serviceIdentifier: number, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write service characteristic | Promise | No | iOS/Android | yes | +| writeCharacteristic(characteristicIdentifier: number, valueBase64: string, response: boolean,transactionId: string) | write identifier characteristic | Promise | No | iOS/Android | yes | +| monitorCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string,transactionId: string) | monitor device characteristic | Promise | No | iOS/Android | yes | +| monitorCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | monitor service characteristic | Promise | No | iOS/Android | yes | +| monitorCharacteristic(characteristicIdentifier: number, transactionId: string) | monitor identifier characteristic | Promise | No | iOS/Android | yes | +| readDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read device descriptor | Promise | No | iOS/Android | yes | +| readDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read service descriptor | Promise | No | iOS/Android | yes | +| readDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string,transactionId: string) | read identifier characteristic descriptor | Promise | No | iOS/Android | yes | +| readDescriptor(descriptorIdentifier: number, transactionId: string) | read identifier descriptor | Promise | No | iOS/Android | yes | +| writeDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write device descriptor | Promise | No | iOS/Android | yes | +| writeDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write service descriptor | Promise | No | iOS/Android | yes | +| writeDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string, valueBase64: string,transactionId: string) | write identifier characteristic descriptor | Promise | No | iOS/Android | yes | +| writeDescriptor(descriptorIdentifier: number, valueBase64: string, transactionId: string) | write identifier descriptor | Promise | No | iOS/Android | yes | ## 遗留问题 -- [ ] cancelTransaction(transactionId: string)接口harmony暂不支持: [issue#2](https://github.com/react-native-oh-library/react-native-ble-plx/issues/2) -- [ ] setLogLevel(logLevel: string)接口harmony暂不支持: [issue#3](https://github.com/react-native-oh-library/react-native-ble-plx/issues/3) -- [ ] logLevel()接口harmony暂不支持: [issue#4](https://github.com/react-native-oh-library/react-native-ble-plx/issues/4) -- [ ] requestConnectionPriorityForDevice(deviceId: string, connectionPriority: number,transactionId: string)接口harmony暂不支持: [issue#5](https://github.com/react-native-oh-library/react-native-ble-plx/issues/5) +- [ ] cancelTransaction(transactionId: string)接口 harmony 暂不支持: [issue#2](https://github.com/react-native-oh-library/react-native-ble-plx/issues/2) +- [ ] setLogLevel(logLevel: string)接口 harmony 暂不支持: [issue#3](https://github.com/react-native-oh-library/react-native-ble-plx/issues/3) +- [ ] logLevel()接口 harmony 暂不支持: [issue#4](https://github.com/react-native-oh-library/react-native-ble-plx/issues/4) +- [ ] requestConnectionPriorityForDevice(deviceId: string, connectionPriority: number,transactionId: string)接口 harmony 暂不支持: [issue#5](https://github.com/react-native-oh-library/react-native-ble-plx/issues/5) ## 其他 diff --git a/zh-cn/react-native-bootsplash.md b/zh-cn/react-native-bootsplash.md index b44c5ce4..f4da50f3 100644 --- a/zh-cn/react-native-bootsplash.md +++ b/zh-cn/react-native-bootsplash.md @@ -13,21 +13,19 @@

- - > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-bootsplash) ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -|------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| ---------- | -| 6.1.1@deprecated | [@react-native-oh-tpl/react-native-bootsplash Releases(deprecated)](https://github.com/react-native-oh-library/react-native-bootsplash/releases) | 0.72 | -| 6.1.2 | [@react-native-ohos/react-native-bootsplash Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/releases) | 0.72 | -| 6.3.5 | [@react-native-ohos/react-native-bootsplash Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | +| <= 6.1.1-0.0.3@deprecated | [@react-native-oh-tpl/react-native-bootsplash Releases(deprecated)](https://github.com/react-native-oh-library/react-native-bootsplash/releases) | 0.72 | +| 6.1.2 | [@react-native-ohos/react-native-bootsplash Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/releases) | 0.72 | +| 6.3.5 | [@react-native-ohos/react-native-bootsplash Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： @@ -46,7 +44,8 @@ yarn add @react-native-ohos/react-native-bootsplash ``` #### 生成配置文件 -为了加快设置速度，我们提供了一个CLI来自动生成配置、创建Android Drawable XML文件、iOS Storyboard文件和HarmonyOS Resources文件 + +为了加快设置速度，我们提供了一个 CLI 来自动生成配置、创建 Android Drawable XML 文件、iOS Storyboard 文件和 HarmonyOS Resources 文件 ```bash $ npx react-native generate-bootsplash --help @@ -86,6 +85,7 @@ npx react-native generate-bootsplash svgs/light-logo.svg ``` 命令执行后将创建以下文件: + ```js # Without license key android/app/src/main/res/drawable-mdpi/bootsplash_logo.png @@ -120,7 +120,7 @@ assets/bootsplash/logo@3x.png assets/bootsplash/logo@4x.png ``` -编辑您的启动Ability文件, 它通常是配置在entry模块module.json5中abilities属性中配置的第一个abilitie: +编辑您的启动 Ability 文件, 它通常是配置在 entry 模块 module.json5 中 abilities 属性中配置的第一个 abilitie: ```diff + import { window } from '@kit.ArkUI'; @@ -144,11 +144,19 @@ export default class EntryAbility extends RNAbility { > [!WARNING] 使用时 import 的库名不变。 -> [!TIP] 示例中logo参数使用了本地图片资源，可以到[react-native-boot-splash demo](https://github.com/react-native-oh-library/RNOHDCS/tree/main/react-native-boot-splash/source)获取该图片 +> [!TIP] 示例中 logo 参数使用了本地图片资源，可以到[react-native-boot-splash demo](https://github.com/react-native-oh-library/RNOHDCS/tree/main/react-native-boot-splash/source)获取该图片 ```js -import { useState , useEffect} from "react"; -import { Animated, View, Text, Dimensions, Platform, StatusBar, StyleSheet } from "react-native"; +import { useState, useEffect } from "react"; +import { + Animated, + View, + Text, + Dimensions, + Platform, + StatusBar, + StyleSheet, +} from "react-native"; import BootSplash from "react-native-bootsplash"; const styles = StyleSheet.create({ @@ -169,7 +177,7 @@ const styles = StyleSheet.create({ }); type Props = { - onAnimationEnd: () => void; + onAnimationEnd: () => void, }; export const AnimatedBootSplash = ({ onAnimationEnd }: Props) => { @@ -230,7 +238,7 @@ const App = () => { { BootSplash.isVisible(); - console.log("--------++++AnimationEnd") + console.log("--------++++AnimationEnd"); setVisible(false); }} /> @@ -256,13 +264,13 @@ export default App; ## 使用 Codegen -Version >= @react-native-ohos/react-native-bootsplash@6.1.2，已适配codegen-lib生成桥接代码。 +Version >= @react-native-ohos/react-native-bootsplash@6.1.2，已适配 codegen-lib 生成桥接代码。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -Version >= @react-native-ohos/react-native-bootsplash@6.1.2，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-bootsplash@6.1.2，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 @@ -312,9 +320,9 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.配置 CMakeLists 和引入 BootSplashPackage +### 3.配置 CMakeLists 和引入 RNBootSplashPackage -> V6.1.2 需要配置CMakeLists 和引入 BootSplashPackage。 +> 若使用的是 <= 6.1.1-0.0.3 版本，请跳过本章。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -338,7 +346,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/@react-native-ohos/react-native-bootsplash/src/main/cpp" ./bootsplash) ++ add_subdirectory("${OH_MODULE_DIR}/@react-native-ohos/react-native-bootsplash/src/main/cpp" ./boot_splash) # RNOH_END: manual_package_linking_1 @@ -353,7 +361,7 @@ 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_boot_splash) ++ target_link_libraries(rnoh_app PUBLIC rnoh_bootsplash) # RNOH_END: manual_package_linking_2 ``` @@ -362,14 +370,14 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ```diff #include "RNOH/PackageProvider.h" #include "SamplePackage.h" -+ #include "BootsplashPackage.h" ++ #include "RNBootSplashPackage.h" using namespace rnoh; std::vector> PackageProvider::getPackages(Package::Context ctx) { return { std::make_shared(ctx), -+ std::make_shared(ctx) ++ std::make_shared(ctx) }; } ``` @@ -411,8 +419,9 @@ ohpm install 在以下版本验证通过： -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## API @@ -420,11 +429,11 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------- | ------------------------------------------------------------ | -------- | -------- | ------------ | ----------------- | -| hide | Hide the splash screen. | function | no | Android、IOS | yes | -| isVisible | Return the current visibility status of the native splash screen. | function | no | Android、IOS | yes | -| useHideAnimation | A hook to easily create a custom hide animation by animating all splash screen elements using Animated, react-native-reanimated or else (similar as the video on top of this documentation). | function | no | Android、IOS | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ------------ | ----------------- | +| hide | Hide the splash screen. | function | no | Android、IOS | yes | +| isVisible | Return the current visibility status of the native splash screen. | function | no | Android、IOS | yes | +| useHideAnimation | A hook to easily create a custom hide animation by animating all splash screen elements using Animated, react-native-reanimated or else (similar as the video on top of this documentation). | function | no | Android、IOS | yes | ### hide @@ -432,9 +441,9 @@ ohpm install type hide = (config?: { fade?: boolean }) => Promise; ``` -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----- | ---------------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | -| fade | Hide the splash screen (immediately, or with a fade out). | boolean | No | iOS/Android | partially | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | --------------------------------------------------------- | ------- | -------- | ----------- | ----------------- | +| fade | Hide the splash screen (immediately, or with a fade out). | boolean | No | iOS/Android | partially | ### useHideAnimation @@ -442,27 +451,28 @@ type hide = (config?: { fade?: boolean }) => Promise; useHideAnimation(config: {UseHideAnimationConfig}) => {container: ContainerProps;logo: LogoProps;brand: BrandProps;}; ``` -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----- | ---------------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | -| ready | a boolean flag to delay the animate execution (default: true) | boolean | No | iOS/Android | partially | -| manifest | the manifest file is generated in your assets directory | Manifest | Yes | iOS/Android | partially | -| logo | logo image in animation | ImageRequireSource | No | iOS/Android | partially | -| darkLogo | logo image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | -| brand | brand image in animation | ImageRequireSource | No | iOS/Android | partially | -| darkBrand | brand image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | -| statusBarTranslucent | sets whether the status bar is transparent | boolean | No | iOS/Android | No | -| navigationBarTranslucent | sets whether the navigation bar is transparent | boolean | No | iOS/Android | No | -| animate | custom hide animation | function | Yes | iOS/Android | partially | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ------------------------------------------------------------- | ------------------ | -------- | ----------- | ----------------- | +| ready | a boolean flag to delay the animate execution (default: true) | boolean | No | iOS/Android | partially | +| manifest | the manifest file is generated in your assets directory | Manifest | Yes | iOS/Android | partially | +| logo | logo image in animation | ImageRequireSource | No | iOS/Android | partially | +| darkLogo | logo image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | +| brand | brand image in animation | ImageRequireSource | No | iOS/Android | partially | +| darkBrand | brand image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | +| statusBarTranslucent | sets whether the status bar is transparent | boolean | No | iOS/Android | No | +| navigationBarTranslucent | sets whether the navigation bar is transparent | boolean | No | iOS/Android | No | +| animate | custom hide animation | function | Yes | iOS/Android | partially | ## 遗留问题 -- [ ] HarmonyOS的window窗口上不支持设置动画属性，hide接口fade参数设置true没有效果 问题: [issue#13](https://github.com/react-native-oh-library/react-native-bootsplash/issues/13) -- [ ] HarmonyOS的上不支持navigationBarTranslucent属性，useHideAnimation接口navigationBarTranslucent参数设置true没有效果 问题: [issue#6](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/issues/6) -- [ ] HarmonyOS的上不支持statusBarTranslucent属性，useHideAnimation接口statusBarTranslucent参数设置true没有效果 问题: [issue#6](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/issues/6) +- [ ] HarmonyOS 的 window 窗口上不支持设置动画属性，hide 接口 fade 参数设置 true 没有效果 问题: [issue#13](https://github.com/react-native-oh-library/react-native-bootsplash/issues/13) +- [ ] HarmonyOS 的上不支持 navigationBarTranslucent 属性，useHideAnimation 接口 navigationBarTranslucent 参数设置 true 没有效果 问题: [issue#6](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/issues/6) +- [ ] HarmonyOS 的上不支持 statusBarTranslucent 属性，useHideAnimation 接口 statusBarTranslucent 参数设置 true 没有效果 问题: [issue#6](https://gitcode.com/openharmony-sig/rntpc_react-native-bootsplash/issues/6) ## 其他 -- 执行generate-bootsplash命令行时，由于 `--brand, --brand-width 和 --dark-*` 选项需要购买license才能使用，涉及功能未开源，HarmonyOS平台不支持使用 + +- 执行 generate-bootsplash 命令行时，由于 `--brand, --brand-width 和 --dark-*` 选项需要购买 license 才能使用，涉及功能未开源，HarmonyOS 平台不支持使用 ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/zoontek/react-native-bootsplash/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/zoontek/react-native-bootsplash/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-cardview.md b/zh-cn/react-native-cardview.md index adf7f721..b3641fef 100644 --- a/zh-cn/react-native-cardview.md +++ b/zh-cn/react-native-cardview.md @@ -18,13 +18,13 @@ 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------| ---------- | -| 2.0.3@deprecated | [@react-native-oh-tpl/react-native-cardview Releases(deprecated)](https://github.com/react-native-oh-library/react-native-cardview/releases) | 0.72 | -| 2.0.4 | [@react-native-ohos/react-native-cardview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cardview/releases) | 0.72 | -| 2.1.0 | [@react-native-ohos/react-native-cardview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cardview/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 2.0.3-0.0.2@deprecated | [@react-native-oh-tpl/react-native-cardview Releases(deprecated)](https://github.com/react-native-oh-library/react-native-cardview/releases) | 0.72 | +| 2.0.4 | [@react-native-ohos/react-native-cardview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cardview/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-cardview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-cardview/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： @@ -49,77 +49,76 @@ yarn add @react-native-ohos/react-native-cardview > [!WARNING] 使用时 import 的库名不变。 ```js -import React, { Component } from 'react'; -import { StyleSheet, Text, View, SafeAreaView } from 'react-native'; -import CardView from 'react-native-cardview'; +import React, { Component } from "react"; +import { StyleSheet, Text, View, SafeAreaView } from "react-native"; +import CardView from "react-native-cardview"; export default class Example3 extends Component { render() { return ( - + - - - Helloo - - - + Helloo + + + ); } } const styles = StyleSheet.create({ container: { - flex: 1 + flex: 1, }, card: { - backgroundColor: 'white', - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'center', + backgroundColor: "white", + alignItems: "center", + justifyContent: "center", + alignSelf: "center", flex: 1, - margin: 10 + margin: 10, }, text: { - textAlign: 'center', + textAlign: "center", margin: 10, - height: 75 + height: 75, }, instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5 - } + textAlign: "center", + color: "#333333", + marginBottom: 5, + }, }); - ``` ## Link -Version >= @react-native-ohos/react-native-cardview@2.0.4，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-cardview@2.0.4，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 @@ -171,6 +170,8 @@ ohpm install ### 3.配置 CMakeLists 和引入 CardViewPackage +> 若使用的是 <= 2.0.3-0.0.2 版本，请跳过本章。 + 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff @@ -191,7 +192,7 @@ 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/react-native-cardview/src/main/cpp" ./card-view) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-cardview/src/main/cpp" ./card_view) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -228,7 +229,22 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.运行 +### 4.在 ArkTs 侧引入 CardViewPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff ++ import {CardViewPackage} from '@react-native-ohos/react-native-audio-recorder-player/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new CardViewPackage(ctx) + ]; +} +``` + +### 5.运行 点击右上角的 `sync` 按钮 @@ -249,31 +265,32 @@ ohpm install 在以下版本验证通过： -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 属性 - cardview组件接收所有[React Native Text](https://reactnative.dev/docs/text)组件的Props。 +cardview 组件接收所有[React Native Text](https://reactnative.dev/docs/text)组件的 Props。 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持HarmonyOS | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| cornerRadius | 用于设置卡片高度的属性。 | number | No | iOS/Android | yes | -| cardElevation | 用于在 Android 预 Lollipop 设备上支持阴影的属性 | number | No | iOS/Android | yes | -| cardMaxElevation | 用于设置卡片半径的属性。 | number | No | Android | yes | -| useCompatPadding | CardView 在 Lollipop 之前的平台上会增加额外的内边距以绘制阴影。 | boolean | No | Android | no | -| cornerOverlap | 在 Lollipop 之前的平台上，CardView 不会裁剪卡片圆角的边界。 | boolean | No | Android | no | +| 名称 | 描述 | 类型 | 是否必需 | 支持的平台 | 是否支持 HarmonyOS | +| ---------------- | --------------------------------------------------------------- | ------- | -------- | ----------- | ------------------ | +| cornerRadius | 用于设置卡片高度的属性。 | number | No | iOS/Android | yes | +| cardElevation | 用于在 Android 预 Lollipop 设备上支持阴影的属性 | number | No | iOS/Android | yes | +| cardMaxElevation | 用于设置卡片半径的属性。 | number | No | Android | yes | +| useCompatPadding | CardView 在 Lollipop 之前的平台上会增加额外的内边距以绘制阴影。 | boolean | No | Android | no | +| cornerOverlap | 在 Lollipop 之前的平台上，CardView 不会裁剪卡片圆角的边界。 | boolean | No | Android | no | ## 遗留问题 -- [ ] cornerRadius和cardElevation属性同时调用的时会导致阴影不显示: [#issues14](https://github.com/react-native-oh-library/react-native-cardview/issues/14) +- [ ] cornerRadius 和 cardElevation 属性同时调用的时会导致阴影不显示: [#issues14](https://github.com/react-native-oh-library/react-native-cardview/issues/14) ## 其他 ## 开源协议 -本项目基于 [The MIT License](https://github.com/Kishanjvaghela/react-native-cardview/blob/master/LICENSE)，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License](https://github.com/Kishanjvaghela/react-native-cardview/blob/master/LICENSE)，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-clipboard-clipboard.md b/zh-cn/react-native-clipboard-clipboard.md index 07634d51..41e2fd69 100644 --- a/zh-cn/react-native-clipboard-clipboard.md +++ b/zh-cn/react-native-clipboard-clipboard.md @@ -12,17 +12,17 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/clipboard/tree/sig) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/clipboard) ## 安装与使用 -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.13.2@deprecated | [@react-native-oh-tpl/clipboard Releases(deprecated)](https://github.com/react-native-oh-library/clipboard/releases) | 0.72 | -| 1.13.3 | [@react-native-ohos/clipboard Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.72 | -| 1.16.3 | [@react-native-ohos/clipboard Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 1.13.2-0.0.10@deprecated | [@react-native-oh-tpl/clipboard Releases(deprecated)](https://github.com/react-native-oh-library/clipboard/releases) | 0.72 | +| 1.13.3 | [@react-native-ohos/clipboard Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.72 | +| 1.16.3 | [@react-native-ohos/clipboard Releases](https://gitcode.com/openharmony-sig/rntpc_clipboard/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： @@ -81,8 +81,8 @@ export default App; **For RN0.77** ```js -import React, { useState } from 'react'; -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import React, { useState } from "react"; +import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import Clipboard from "@react-native-clipboard/clipboard"; const App = () => { @@ -129,7 +129,9 @@ export default App; ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Version >= @react-native-ohos/clipboard@1.13.3，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md + +此步骤为手动配置原生依赖项的指导。 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` @@ -180,6 +182,8 @@ ohpm install ### 3.配置 CMakeLists 和引入 ClipboardPackage +> 若使用的是 <= 1.13.2-0.0.10 版本，请跳过本章。 + 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff @@ -276,14 +280,15 @@ ohpm install 在以下版本验证通过： -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### 权限要求 > [!TIP] "ohos.permission.READ_PASTEBOARD"权限等级为system_basic，授权方式为user_grant，[使用 ACL 签名的配置指导](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/signing-0000001587684945-V3#section157591551175916) -#### 在 entry 目录下的module.json5中添加权限 +#### 在 entry 目录下的 module.json5 中添加权限 打开 `entry/src/main/module.json5`，添加： @@ -325,21 +330,21 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------- | ------------------------- | -------- | -------- | ----------- | ----------------- | -| getString | 获取字符串类型的内容，该方法返回一个Promise，因此可以使用以下代码获取剪贴板内容 | function | NO | iOS,Android | yes | -| setString | 设置字符串类型的内容，可以使用以下代码设置剪贴板内容 | function | NO | iOS,Android | yes | -| hasString | 返回剪贴板是否有内容或为空 | function | NO | iOS,Android | yes | -| getImage | 获取base64字符串类型的图像内容，该方法返回一个Promise，因此可以使用以下代码获取剪贴板内容（仅限ANDROID） | function | NO | Android | no | -| getStrings | （仅限iOS）获取字符串数组类型的内容，该方法返回一个Promise，因此可以使用以下代码获取剪贴板内容 | function | NO | iOS | yes | -| setStrings | （仅限iOS）设置字符串数组类型的内容，可以使用以下代码设置剪贴板内容 | function | NO | iOS | yes | -| hasNumber | （仅限iOS 14+）返回剪贴板是否包含数字(UIPasteboardDetectionPatternNumber)内容。可以在不触发iOS 14+的粘贴板通知的情况下检查剪贴板中是否有数字内容 | function | NO | iOS | yes | -| hasImage | 返回剪贴板是否有图像 | function | NO | iOS | yes | -| hasUrl | （仅限iOS）返回剪贴板是否包含URL内容。可以在不触发iOS 14+的粘贴板通知的情况下检查剪贴板中是否有URL内容 | function | NO | iOS | yes | -| hasWebUrl | （仅限iOS 14+）返回剪贴板是否包含WebURL(UIPasteboardDetectionPatternProbableWebURL)内容。可以在不触发iOS 14+的粘贴板通知的情况下检查剪贴板中是否有WebURL内容 | function | NO | iOS | yes | -| setImage | 设置图像类型的内容（base64字符串） | function | NO | iOS | yes | -| getImageJPG | 获取JPG图像的base64字符串 | function | NO | iOS | yes | -| getImagePNG | 获取PNG图像的base64字符串 | function | NO | iOS | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | +| getString | 获取字符串类型的内容，该方法返回一个 Promise，因此可以使用以下代码获取剪贴板内容 | function | NO | iOS,Android | yes | +| setString | 设置字符串类型的内容，可以使用以下代码设置剪贴板内容 | function | NO | iOS,Android | yes | +| hasString | 返回剪贴板是否有内容或为空 | function | NO | iOS,Android | yes | +| getImage | 获取 base64 字符串类型的图像内容，该方法返回一个 Promise，因此可以使用以下代码获取剪贴板内容（仅限 ANDROID） | function | NO | Android | no | +| getStrings | （仅限 iOS）获取字符串数组类型的内容，该方法返回一个 Promise，因此可以使用以下代码获取剪贴板内容 | function | NO | iOS | yes | +| setStrings | （仅限 iOS）设置字符串数组类型的内容，可以使用以下代码设置剪贴板内容 | function | NO | iOS | yes | +| hasNumber | （仅限 iOS 14+）返回剪贴板是否包含数字(UIPasteboardDetectionPatternNumber)内容。可以在不触发 iOS 14+的粘贴板通知的情况下检查剪贴板中是否有数字内容 | function | NO | iOS | yes | +| hasImage | 返回剪贴板是否有图像 | function | NO | iOS | yes | +| hasUrl | （仅限 iOS）返回剪贴板是否包含 URL 内容。可以在不触发 iOS 14+的粘贴板通知的情况下检查剪贴板中是否有 URL 内容 | function | NO | iOS | yes | +| hasWebUrl | （仅限 iOS 14+）返回剪贴板是否包含 WebURL(UIPasteboardDetectionPatternProbableWebURL)内容。可以在不触发 iOS 14+的粘贴板通知的情况下检查剪贴板中是否有 WebURL 内容 | function | NO | iOS | yes | +| setImage | 设置图像类型的内容（base64 字符串） | function | NO | iOS | yes | +| getImageJPG | 获取 JPG 图像的 base64 字符串 | function | NO | iOS | yes | +| getImagePNG | 获取 PNG 图像的 base64 字符串 | function | NO | iOS | yes | ## 遗留问题 diff --git a/zh-cn/react-native-clippath-capi.md b/zh-cn/react-native-clippath-capi.md index 0783a964..1068ad1f 100644 --- a/zh-cn/react-native-clippath-capi.md +++ b/zh-cn/react-native-clippath-capi.md @@ -11,38 +11,33 @@ License

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-clippath/tree/capi) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-clippath) -该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-clippathview，具体版本所属关系如下： +## 安装与使用 -| 三方库版本 | 包名 | 仓库地址 | 发布(Release) | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | ---------- | ---------- | -| 1.1.8@deprecated | @react-native-oh-tpl/react-native-clippathview | [Github](https://github.com/react-native-oh-library/react-native-clippath/tree/capi)|[Github Releases](https://github.com/react-native-oh-library/react-native-clippath/releases)|0.72 | -| 1.1.9 | @react-native-ohos/react-native-clippathview | [Gitcode](https://gitcode.com/openharmony-sig/rntpc_react-native-clippath/tree/br_rnoh0.77) |[Gitcode Releases]() | 0.77 | -| 1.2.0 | @react-native-ohos/react-native-clippathview | [Gitcode](https://gitcode.com/openharmony-sig/rntpc_react-native-clippath/tree/br_rnoh0.77) |[Gitcode Releases]() | 0.77 | +请到三方库的 Releases 发布地址查看配套的版本信息： -## 安装与使用 +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | +| <= 1.1.8-0.1.6@deprecated | [@react-native-oh-tpl/react-native-clippathview Releases(deprecated)](https://github.com/react-native-oh-library/react-native-clippath/releases) | 0.72 | +| 3.6.11 | [@react-native-ohos/react-native-clippathview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-clippath/releases) | 0.72 | +| 3.6.14 | [@react-native-ohos/react-native-clippathview Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-clippath/releases) | 0.77 | + +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： #### **npm** -```bash -# 0.72 -npm install @react-native-oh-tpl/react-native-clippathview -# 0.77 +```bash npm install @react-native-ohos/react-native-clippathview ``` #### **yarn** ```bash -# 0.72 -yarn add @react-native-oh-tpl/react-native-clippathview - -# 0.77 yarn add @react-native-ohos/react-native-clippathview ``` @@ -75,7 +70,7 @@ export default function index() { ## Link -Version >= @react-native-ohos/react-native-clippathview@1.1.9，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-clippathview@3.6.11，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 @@ -108,10 +103,7 @@ Version >= @react-native-ohos/react-native-clippathview@1.1.9，已支持 Autoli ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - // 0.72 - "@react-native-oh-tpl/react-native-clippathview": "file:../../node_modules/@react-native-oh-tpl/react-native-clippathview/harmony/clipPath.har", - // 0.77 "@react-native-ohos/react-native-clippathview": "file:../../node_modules/@react-native-ohos/react-native-clippathview/harmony/clipPath.har", } ``` @@ -129,9 +121,10 @@ ohpm install 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) - ### 3.配置 CMakeLists 和引入 ClipPathViewPackage +> 若使用的是 <= 1.1.8-0.1.6 版本，请跳过本章。 + 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff @@ -145,11 +138,7 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_END: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ # 0.72 -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-clippathview/src/main/cpp" ./clippath) - -+ # 0.77 -+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-clippathview/src/main/cpp" ./clippath) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-clippathview/src/main/cpp" ./clipPath) # RNOH_END: manual_package_linking_1 add_library(rnoh_app SHARED @@ -182,22 +171,18 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 4.在 ArkTs 侧引入 ClipPathPackage +### 4.在 ArkTs 侧引入 ClipPathViewPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... -+ // 0.72 -+ import { ClipPathPackage } from '@react-native-oh-tpl/react-native-clippathview/ts'; - -+ // 0.77 -+ import { ClipPathPackage } from '@react-native-ohos/react-native-clippathview/ts'; ++ import { ClipPathViewPackage } from '@react-native-ohos/react-native-clippathview/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), -+ new ClipPathPackage(ctx), ++ new ClipPathViewPackage(ctx), ]; } ``` @@ -219,12 +204,13 @@ ohpm install ### 兼容性 -本文档内容基于以下版本验证通过： +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 在以下版本验证通过： -1. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.1.1.830; ROM: 6.0.0.112 SP12; -2. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -3. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 属性 @@ -234,18 +220,18 @@ ohpm install | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ----------- | ----------------- | -| svgKey | 唯一 key | string | No | Web | No | +| svgKey | 唯一 key | string | No | Web | No | | d | 形状由一系列命令定义（svg path data） | string | No | iOS/Android | Yes | | viewBox | 定义用户空间中的位置和维度 | Array(4) | No | iOS/Android | Yes | -| align | preserveAspectRatio 属性的 align | string | No | iOS/Android | Yes | -| aspect | preserveAspectRatio 属性的 meetOrSlice | meet/slice/none | No | iOS/Android | Yes | -| fillRule | 路径内部填充规则 | nonzero/evenodd | No | iOS/Android | Yes | +| align | preserveAspectRatio 属性的 align | string | No | iOS/Android | Yes | +| aspect | preserveAspectRatio 属性的 meetOrSlice | meet/slice/none | No | iOS/Android | Yes | +| fillRule | 路径内部填充规则 | nonzero/evenodd | No | iOS/Android | Yes | | 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 | Yes | -| strokeEnd | iOS CAShapeLayer 表示绘制结束的地方站总路径的百分比。默认值是 1，如果小于等于 strokeStart 则绘制不出任何内容。 | number | No | iOS/Android | Yes | +| strokeStart | iOS CAShapeLayer 描线开始的地方占总路径的百分比。默认值是 0。 | number | No | iOS/Android | Yes | +| strokeEnd | iOS CAShapeLayer 表示绘制结束的地方站总路径的百分比。默认值是 1，如果小于等于 strokeStart 则绘制不出任何内容。 | number | No | iOS/Android | Yes | | translateZ | 设置定位层级，相当于 index | number | No | iOS/Android | Yes | | transX | 在二维平面上水平方向移动元素 | number | No | iOS/Android | Yes | | transY | 在二维平面上垂直方向移动元素 | number | No | iOS/Android | Yes | diff --git a/zh-cn/react-native-community-progress-view.md b/zh-cn/react-native-community-progress-view.md index 5a68262f..4044bce5 100644 --- a/zh-cn/react-native-community-progress-view.md +++ b/zh-cn/react-native-community-progress-view.md @@ -4,20 +4,19 @@

@react-native-community/progress-view

- -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/progress-view) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/progress-view) ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -|--------| ------------------------------------------------------------ | ---------- | -| 1.4.2@deprecated | [@react-native-oh-tpl/progress-view Releases(deprecated)](https://github.com/react-native-oh-library/progress-view/releases) | 0.72 | -| 1.4.3 | [@react-native-ohos/progress-view Releases](https://gitcode.com/openharmony-sig/rntpc_progress-view/releases) | 0.72 | -| 1.5.0 | [@react-native-ohos/progress-view Releases](https://gitcode.com/openharmony-sig/rntpc_progress-view/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 1.4.2-0.0.8@deprecated | [@react-native-oh-tpl/progress-view Releases(deprecated)](https://github.com/react-native-oh-library/progress-view/releases) | 0.72 | +| 1.4.3 | [@react-native-ohos/progress-view Releases](https://gitcode.com/openharmony-sig/rntpc_progress-view/releases) | 0.72 | +| 1.5.0 | [@react-native-ohos/progress-view Releases](https://gitcode.com/openharmony-sig/rntpc_progress-view/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： @@ -51,13 +50,13 @@ export default function ProgressViewExample() { trackTintColor="blue" progress={0.7} /> - ) + ); } ``` ## 2. Manual Link -Version >= @react-native-ohos/progress-view@1.4.3，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/progress-view@1.4.3，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 @@ -114,7 +113,7 @@ ohpm install ### 2.3 配置 CMakeLists 和引入 ProgressViewPackage -> V1.4.3 需要配置 CMakeLists 和引入 ProgressViewPackage +> 若使用的是 <= 1.4.2-0.0.8 版本，请跳过本章。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -129,7 +128,7 @@ 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/progress-view/src/main/cpp" ./progress-view) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/progress-view/src/main/cpp" ./progress_view) # RNOH_BEGIN: manual_package_linking_1 add_library(rnoh_app SHARED @@ -172,7 +171,7 @@ import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-packag @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { - ... + ... + if (ctx.componentName === PROGRESS_VIEW_TYPE) { + RNCProgressView({ + ctx: ctx.rnComponentContext, @@ -197,23 +196,22 @@ const arkTsComponentNames: Array = [ ]; ``` - > **[!TIP] 版本 1.4.3 及以上需要.** +### 2.4 在 ArkTs 侧引入 ProgressViewPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff - ... + import { ProgressViewPackage } from "@react-native-ohos/progress-view/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), -+ new ProgressViewPackage(ctx), ++ new ProgressViewPackage(ctx), ]; } ``` -### 2.4 运行 +### 2.5 运行 点击右上角的 `sync` 按钮 @@ -234,9 +232,9 @@ ohpm install 在以下版本验证通过： -1. RNOH: 0.72.96; SDK: HarmonyOS 5.1.0.150 (API Version 12); IDE: DevEco Studio 5.1.1.830; ROM: 5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; 2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; -3. RNOH: 0.77.18; SDK: HarmonyOS 5.0.0.71(API Version 12 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 5.1.0.150; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 4. 属性 @@ -244,15 +242,15 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------- | ------------------------------------------ | ------ | -------- | -------- | ----------------- | -| `progress` | 进度值（在0和1之间）。 | number | No | All | Yes | -| `progressTintColor` | 进度条本身的着色。 | string | No | All | Yes | -| `trackTintColor` | 进度条轨道的着色。 | string | No | All | Yes | -| `progressImage` | 作为进度条显示的可拉伸图像。 | Image.propTypes.source | No | All | No | -| `trackImage` | 显示在进度条后面的可拉伸图像。仅网络图像在Windows上有效。| Image.propTypes.source | No | All | No | -| `progressViewStyle` | 进度条样式。仅网络图像在Windows上有效。 | enum('default', 'bar') | No | All | No | -| `isIndeterminate` | 将进度条转换为不定期进度条。 | bool | No | Windows | Partially | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ----------------------------------------------------------- | ---------------------- | -------- | -------- | ----------------- | +| `progress` | 进度值（在 0 和 1 之间）。 | number | No | All | Yes | +| `progressTintColor` | 进度条本身的着色。 | string | No | All | Yes | +| `trackTintColor` | 进度条轨道的着色。 | string | No | All | Yes | +| `progressImage` | 作为进度条显示的可拉伸图像。 | Image.propTypes.source | No | All | No | +| `trackImage` | 显示在进度条后面的可拉伸图像。仅网络图像在 Windows 上有效。 | Image.propTypes.source | No | All | No | +| `progressViewStyle` | 进度条样式。仅网络图像在 Windows 上有效。 | enum('default', 'bar') | No | All | No | +| `isIndeterminate` | 将进度条转换为不定期进度条。 | bool | No | Windows | Partially | ## 5. 遗留问题 @@ -263,4 +261,3 @@ ohpm install ## 7. 开源协议 本项目基于 [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_progress-view/blob/master/LICENSE) ，请自由地享受和参与开源。 - diff --git a/zh-cn/react-native-compass-heading.md b/zh-cn/react-native-compass-heading.md index 216f7227..5eff2ad7 100644 --- a/zh-cn/react-native-compass-heading.md +++ b/zh-cn/react-native-compass-heading.md @@ -18,13 +18,13 @@ 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 1.5.0@deprecated | [@react-native-oh-tpl/react-native-compass-heading Releases(deprecated)](https://github.com/react-native-oh-library/react-native-compass-heading/releases) | 0.72 | -| 1.5.1 | [@react-native-ohos/react-native-compass-heading Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-compass-heading/releases) | 0.72 | -| 2.0.3 | [@react-native-ohos/react-native-compass-heading Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-compass-heading/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 1.5.0-0.0.2@deprecated | [@react-native-oh-tpl/react-native-compass-heading Releases(deprecated)](https://github.com/react-native-oh-library/react-native-compass-heading/releases) | 0.72 | +| 1.5.1 | [@react-native-ohos/react-native-compass-heading Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-compass-heading/releases) | 0.72 | +| 2.0.3 | [@react-native-ohos/react-native-compass-heading Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-compass-heading/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： @@ -105,13 +105,13 @@ const styles = StyleSheet.create({ ## 使用 Codegen -Version >= @react-native-ohos/react-native-compass-heading@1.5.1，已适配codegen-lib生成桥接代码。 +Version >= @react-native-ohos/react-native-compass-heading@1.5.1，已适配 codegen-lib 生成桥接代码。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -Version >= @react-native-ohos/react-native-compass-heading@1.5.1，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-compass-heading@1.5.1，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 @@ -163,7 +163,7 @@ ohpm install ### 3.配置 CMakeLists 和引入 RNCompassHeadingPackage -> V1.5.1 需要配置 CMakeLists 和引入 RNCompassHeadingPackage。 +> 若使用的是 <= 1.5.0-0.0.2 版本，请跳过本章。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -195,7 +195,7 @@ target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) # RNOH_BEGIN: manual_package_linking_2 ``` -> [!Tip] 注意：上面NODE_MODULES定义，为源库的安装路径，用户可以根据安装源库的路径定义NODE_MODULES +> [!Tip] 注意：上面 NODE_MODULES 定义，为源库的安装路径，用户可以根据安装源库的路径定义 NODE_MODULES 打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： @@ -251,9 +251,9 @@ ohpm install 在以下版本验证通过： -1. RNOH: 0.72.96; SDK: HarmonyOS 5.1.0.150 (API Version 12); IDE: DevEco Studio 5.1.1.830; ROM: 5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; 2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; -3. RNOH: 0.77.18; SDK: HarmonyOS 5.0.0.71(API Version 12 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 5.1.0.150; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 静态方法 diff --git a/zh-cn/react-native-cookies-cookies.md b/zh-cn/react-native-cookies-cookies.md index ce990378..328f4678 100644 --- a/zh-cn/react-native-cookies-cookies.md +++ b/zh-cn/react-native-cookies-cookies.md @@ -12,19 +12,19 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-cookies/tree/sig) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-cookies) ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 6.2.1@deprecated | [@react-native-oh-tpl/cookies Releases(deprecated)](https://github.com/react-native-oh-library/react-native-cookies/releases) | 0.72 | -| 6.2.2 | [@react-native-ohos/cookies Releases](https://gitcode.com/openharmony-sig/rntpc_cookies/releases) | 0.72 | -| 6.3.0 | [@react-native-ohos/cookies Releases](https://gitcode.com/openharmony-sig/rntpc_cookies/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 6.2.1-0.0.8@deprecated | [@react-native-oh-tpl/cookies Releases(deprecated)](https://github.com/react-native-oh-library/react-native-cookies/releases) | 0.72 | +| 6.2.2 | [@react-native-ohos/cookies Releases](https://gitcode.com/openharmony-sig/rntpc_cookies/releases) | 0.72 | +| 6.3.0 | [@react-native-ohos/cookies Releases](https://gitcode.com/openharmony-sig/rntpc_cookies/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： @@ -38,7 +38,7 @@ npm install @react-native-ohos/cookies #### **yarn** -``` +```bash yarn add @react-native-ohos/cookies ``` @@ -143,7 +143,7 @@ export default function CookiesPage() { }} > clearByName()【根据名称删除cookie】 - + = @react-native-ohos/cookies@6.2.2，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/cookies@6.2.2，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + ### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 ```json @@ -243,7 +244,7 @@ ohpm install ### 3.配置 CMakeLists 和引入 CookiesPackage -> V6.2.2 需要配置 CMakeLists 和引入 CookiesPackage +> 若使用的是 <= 6.2.1-0.0.8 版本，请跳过本章。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -333,30 +334,31 @@ ohpm install 在以下版本验证通过： -1. RNOH: 0.72.96; SDK: HarmonyOS 5.1.0.150 (API Version 12); IDE: DevEco Studio 5.1.1.830; ROM: 5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; 2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; -3. RNOH: 0.77.18; SDK: HarmonyOS 5.0.0.71(API Version 12 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 5.1.0.150; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 静态方法 + > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------------- | --------------------------------------------- | ---------|----------| ------------|-------------------| -| clearAll | Clear all cookies |function | NO |iOS,Android | yes | -| get | Get cookies based on url |function | NO | iOS,Android | yes | -| set | Set cookie based on url |function | NO | iOS,Android | yes | -| clearByName | Delete cookies by name |function | NO | iOS | yes | -| flush | Refresh cookies |function | NO | Android | no | -| removeSessionCookies | Clear session cookies |function | NO | iOS,Android | yes | -| getAll | Get all cookies |function | NO | iOS | no | -| setFromResponse | Set cookies from a response header |function | NO | iOS | no | -| getFromResponse | Get cookies from a response header |function | NO | iOS | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ---------------------------------- | -------- | -------- | ----------- | ----------------- | +| clearAll | Clear all cookies | function | NO | iOS,Android | yes | +| get | Get cookies based on url | function | NO | iOS,Android | yes | +| set | Set cookie based on url | function | NO | iOS,Android | yes | +| clearByName | Delete cookies by name | function | NO | iOS | yes | +| flush | Refresh cookies | function | NO | Android | no | +| removeSessionCookies | Clear session cookies | function | NO | iOS,Android | yes | +| getAll | Get all cookies | function | NO | iOS | no | +| setFromResponse | Set cookies from a response header | function | NO | iOS | no | +| getFromResponse | Get cookies from a response header | function | NO | iOS | no | ## 遗留问题 -- [ ] 这四个方法getAll,setFromResponse,getFromResponse,flush 在ios是可用的andriod不可用，Harmony没有对应的api 问题: [issue#1](https://github.com/react-native-oh-library/react-native-cookies/issues/1) +- [ ] 这四个方法 getAll,setFromResponse,getFromResponse,flush 在 ios 是可用的 andriod 不可用，Harmony 没有对应的 api 问题: [issue#1](https://github.com/react-native-oh-library/react-native-cookies/issues/1) ## 其他 diff --git a/zh-cn/react-native-exit-app.md b/zh-cn/react-native-exit-app.md index 0f6d1611..a0e68110 100644 --- a/zh-cn/react-native-exit-app.md +++ b/zh-cn/react-native-exit-app.md @@ -12,24 +12,22 @@

- > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-exit-app) ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 2.0.0@deprecated | [@react-native-oh-tpl/react-native-exit-app Releases(deprecated)](https://github.com/react-native-oh-library/react-native-exit-app/releases) | 0.72 | -| 2.0.1 | [@react-native-ohos/react-native-exit-app Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-exit-app/releases) | 0.72 | -| 2.1.0 | [@react-native-ohos/react-native-exit-app Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-exit-app/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 2.0.0-0.0.1@deprecated | [@react-native-oh-tpl/react-native-exit-app Releases(deprecated)](https://github.com/react-native-oh-library/react-native-exit-app/releases) | 0.72 | +| 2.0.1 | [@react-native-ohos/react-native-exit-app Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-exit-app/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-exit-app Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-exit-app/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： - #### **npm** ```bash @@ -42,13 +40,12 @@ npm install @react-native-ohos/react-native-exit-app yarn add @react-native-ohos/react-native-exit-app ``` - 下面的代码展示了这个库的基本使用场景： > [!WARNING] 使用时 import 的库名不变。 ```js -import React from 'react'; +import React from "react"; import { SafeAreaView, ScrollView, @@ -58,41 +55,39 @@ import { useColorScheme, View, Button, -} from 'react-native'; -import RNExitApp from "react-native-exit-app" -import { Colors } from 'react-native/Libraries/NewAppScreen'; +} from "react-native"; +import RNExitApp from "react-native-exit-app"; +import { Colors } from "react-native/Libraries/NewAppScreen"; function App(): React.JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; + const isDarkMode = useColorScheme() === "dark"; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; return ( - - - - - - - - - - - - - - - - - - - + const numericValue = text.replace(/[^0-9]/g, ""); + setValue(numericValue); + }; + const styles = StyleSheet.create({ + divider: { + height: 1, + backgroundColor: "#CCCCCC", + marginVertical: 5, + }, + }); + return ( + + + 操作流程：1、输入间隔时间。2、选择传感器类型。3、选择输出日志级别。4、点击日志打印按钮。请保证设备支持 + + + setUpdateIntervalForType设置数据采集频率 + + + + + + + + + + + + + + + + - ) -} + + + + + + + + + + ); +}; export default App; ``` ## 2. Manual Link -Version >= @react-native-ohos/react-native-sensors@7.2.3，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-sensors@7.2.3，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 @@ -195,18 +260,42 @@ ohpm install ### 2.3 配置 CMakeLists 和引入 SensorsPackage - > **[!TIP] 版本 7.2.2 及以上需要.** +> 若使用的是 <= 7.2.1 版本，请跳过本章。 打开 `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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-sensors/src/main/cpp" ./sensors) # 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_sensors) # RNOH_END: manual_package_linking_2 ``` @@ -228,6 +317,8 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` +### 在 ArkTs 侧引入 SensorsPackage + 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff @@ -261,8 +352,11 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +在以下版本验证通过： + +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### 3.2 权限要求 @@ -278,19 +372,19 @@ gyroscope 需要的权限：ohos.permission.GYROSCOPE > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------ | ------------ | ---------- | -------- | ----------- | ----------------- | -| accelerometer | accelerometer | Observable | no | ios/Android | yes | -| gyroscope | gyroscope | Observable | no | ios/Android | yes | -| magnetometer | magnetometer | Observable | no | ios/Android | yes | -| barometer | barometer | Observable | no | ios/Android | yes | -| orientation | orientation | Observable | no | ios/Android | yes | -| gravity | gravity | Observable | no | ios/Android | yes | -| setUpdateIntervalForType | setUpdateIntervalForType | function | no | ios/Android | yes | -| setLogLevelForType | setLogLevelForType | function | no | ios/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ------------------------ | ---------- | -------- | ----------- | ----------------- | +| accelerometer | accelerometer | Observable | no | ios/Android | yes | +| gyroscope | gyroscope | Observable | no | ios/Android | yes | +| magnetometer | magnetometer | Observable | no | ios/Android | yes | +| barometer | barometer | Observable | no | ios/Android | yes | +| orientation | orientation | Observable | no | ios/Android | yes | +| gravity | gravity | Observable | no | ios/Android | yes | +| setUpdateIntervalForType | setUpdateIntervalForType | function | no | ios/Android | yes | +| setLogLevelForType | setLogLevelForType | function | no | ios/Android | yes | ## 5. 遗留问题 ## 6. 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-sensors/react-native-sensors/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/react-native-sensors/react-native-sensors/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-signature-capture.md b/zh-cn/react-native-signature-capture.md index c0afde6e..75c5bafb 100644 --- a/zh-cn/react-native-signature-capture.md +++ b/zh-cn/react-native-signature-capture.md @@ -13,27 +13,25 @@

- - > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-signature-capture) ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 0.4.12@deprecated | [@react-native-oh-tpl/react-native-signature-capture Releases(deprecated)](https://github.com/react-native-oh-library/react-native-signature-capture/releases) | 0.72 | -| 0.4.13 | [@react-native-ohos/react-native-signature-capture Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-signature-capture/releases) | 0.72 | -| 0.5.0 | [@react-native-ohos/react-native-signature-capture Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-signature-capture/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 0.4.12@deprecated | [@react-native-oh-tpl/react-native-signature-capture Releases(deprecated)](https://github.com/react-native-oh-library/react-native-signature-capture/releases) | 0.72 | +| 0.4.13 | [@react-native-ohos/react-native-signature-capture Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-signature-capture/releases) | 0.72 | +| 0.5.0 | [@react-native-ohos/react-native-signature-capture Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-signature-capture/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： -#### npm +#### npm ```bash npm install @react-native-ohos/react-native-signature-capture @@ -49,111 +47,116 @@ yarn add @react-native-ohos/react-native-signature-capture 下面的代码展示了这个库的基本使用场景： ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] 使用时 import 的库名不变。 ```tsx -var React = require('react'); -var ReactNative = require('react-native'); +var React = require("react"); +var ReactNative = require("react-native"); -var {Component} = React; +var { Component } = React; -var { - AppRegistry, - StyleSheet, - Text, - View, TouchableHighlight -} = ReactNative; +var { AppRegistry, StyleSheet, Text, View, TouchableHighlight } = ReactNative; -import SignatureCapture from 'react-native-signature-capture'; +import SignatureCapture from "react-native-signature-capture"; class RNSignatureExample extends Component { - render() { - return ( - - Signature Capture Extended - - - - { this.saveSign() } } > - Save - - - { this.resetSign() } } > - Reset - - - - - - ); - } - - saveSign() { - this.refs["sign"].saveImage(); - } - - resetSign() { - this.refs["sign"].resetImage(); - } - - _onSaveEvent(result) { - //result.encoded - for the base64 encoded png - //result.pathName - for the file path name - console.log(result); - } - _onDragEvent() { - // This callback will be called when the user enters signature - console.log("dragged"); - } + render() { + return ( + + + Signature Capture Extended{" "} + + + + + { + this.saveSign(); + }} + > + Save + + + { + this.resetSign(); + }} + > + Reset + + + + ); + } + + saveSign() { + this.refs["sign"].saveImage(); + } + + resetSign() { + this.refs["sign"].resetImage(); + } + + _onSaveEvent(result) { + //result.encoded - for the base64 encoded png + //result.pathName - for the file path name + console.log(result); + } + _onDragEvent() { + // This callback will be called when the user enters signature + console.log("dragged"); + } } const styles = StyleSheet.create({ - signature: { - flex: 1, - borderColor: '#000033', - borderWidth: 1, - }, - buttonStyle: { - flex: 1, justifyContent: "center", alignItems: "center", height: 50, - backgroundColor: "#eeeeee", - margin: 10 - } + signature: { + flex: 1, + borderColor: "#000033", + borderWidth: 1, + }, + buttonStyle: { + flex: 1, + justifyContent: "center", + alignItems: "center", + height: 50, + backgroundColor: "#eeeeee", + margin: 10, + }, }); -AppRegistry.registerComponent('RNSignatureExample', () => RNSignatureExample); - - +AppRegistry.registerComponent("RNSignatureExample", () => RNSignatureExample); ``` ## 使用 Codegen -Version >= @react-native-ohos/react-native-signature-capture@0.4.13，已适配codegen-lib生成桥接代码。 +Version >= @react-native-ohos/react-native-signature-capture@0.4.13，已适配 codegen-lib 生成桥接代码。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -Version >= @react-native-ohos/react-native-signature-capture@0.4.13，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-signature-capture@0.4.13，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` -### 1.在工程根目录的 `oh-package.json5` 添加 overrides字段 +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 ```json { @@ -197,12 +200,13 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.配置 CMakeLists 和引入SignatureCapturePackage +### 3.配置 CMakeLists 和引入 SignatureCapturePackage + +> 若使用的是 <= 0.4.12 版本，请跳过本章。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff - project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) @@ -220,10 +224,8 @@ 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/react-native-signature-capture/src/main/cpp" ./rnoh_signature_capture) -# V0.4.11 for RN0.77 -+ set(REACT_NATIVE_SIGNATURE_CAPTURE_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-signature-capture/src/main/cpp") -+ include_directories(${REACT_NATIVE_SIGNATURE_CAPTURE_CPP_DIR}) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -237,6 +239,7 @@ 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_signature_capture) # RNOH_END: manual_package_linking_2 ``` @@ -329,8 +332,9 @@ ohpm install 在以下版本验证通过： -1. RNOH：0.72.96; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; -2. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150; +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ## 属性 @@ -338,12 +342,11 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - | Name | Description | Type | Required | Platform | HarmonyOS Support | -|-------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|----------|-------------|-------------------| +| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------- | ----------- | ----------------- | | showBorder | If this props is made to false, it will hide the dashed border. | boolean | no | iOS | yes | | showNativeButtons | If this props is made to true, it will display the native buttons "Save" and "Reset".. | boolean | no | iOS/Android | yes | -| showTitleLabel | If this props is made to true, it will display the "x_ _ _ _ _ _ _ _ _ _ _" placeholder indicating where to sign. | boolean | no | iOS | yes | +| showTitleLabel | If this props is made to true, it will display the "x\_ \_ \_ \_ \_ \_ \_ \_ \_ \_ \_" placeholder indicating where to sign. | boolean | no | iOS | yes | | viewMode | "portrait" or "landscape" change the screen orientation based on boolean value | "portrait" \| "landscape" | no | iOS/Android | yes | | maxSize | sets the max size of the image maintains aspect ratio, default is 500 | number | no | iOS/Android | yes | | minStrokeWidth | sets the min stroke line width | number | no | Android | yes | @@ -360,13 +363,11 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - | Name | Description | Type | Required | Platform | HarmonyOS Support | -|------------|-----------------------------------------------------------------------------------------------------|----------|----------|-------------|-------------------| +| ---------- | --------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | | saveImage | when called it will save the image and returns the base 64 encoded string on onSaveEvent() callback | function | no | iOS/Android | yes | | resetImage | when called it will clear the image on the canvas | function | no | iOS/Android | yes | - ## 遗留问题 ## 其他 @@ -374,4 +375,3 @@ ohpm install ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/RepairShopr/react-native-signature-capture/blob/master/LICENSE) ，请自由地享受和参与开源。 - diff --git a/zh-cn/react-native-touch-id.md b/zh-cn/react-native-touch-id.md index 4307dfbf..bcf19c8c 100644 --- a/zh-cn/react-native-touch-id.md +++ b/zh-cn/react-native-touch-id.md @@ -18,13 +18,13 @@ 请到三方库的 Releases 发布地址查看配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -|-------| ------------------------------------------------------------ | ---------- | -| 4.4.1@deprecated | [@react-native-oh-tpl/react-native-touch-id Releases(deprecated)](https://github.com/react-native-oh-library/react-native-touch-id/releases) | 0.72 | -| 4.4.2 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.72 | -| 4.5.0 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 4.4.1-0.0.3@deprecated | [@react-native-oh-tpl/react-native-touch-id Releases(deprecated)](https://github.com/react-native-oh-library/react-native-touch-id/releases) | 0.72 | +| 4.4.2 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.72 | +| 4.5.0 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 进入到工程目录并输入以下命令： @@ -49,55 +49,65 @@ yarn add @react-native-ohos/react-native-touch-id > [!WARNING] 使用时 import 的库名不变。 ```js -import React, { Component, useState } from 'react'; -import { Alert, View, Button, Text } from 'react-native'; -import TouchID from 'react-native-touch-id'; +import React, { Component, useState } from "react"; +import { Alert, View, Button, Text } from "react-native"; +import TouchID from "react-native-touch-id"; const App = () => { - const [result, setResult] = useState('') + const [result, setResult] = useState < string > ""; return ( - - {result} - - - ) + ); }; export default App; - ``` + ## 使用 Codegen -Version >= @react-native-ohos/react-native-touch-id@4.4.2，已适配codegen-lib生成桥接代码。 +Version >= @react-native-ohos/react-native-touch-id@4.4.2，已适配 codegen-lib 生成桥接代码。 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -Version >= @react-native-ohos/react-native-touch-id@4.4.2，已支持 Autolink，无需手动配置，目前只支持72框架。 Autolink框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md +Version >= @react-native-ohos/react-native-touch-id@4.4.2，已支持 Autolink，无需手动配置，目前只支持 72 框架。 Autolink 框架指导文档：https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md 此步骤为手动配置原生依赖项的指导。 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` -### 1.在工程根目录的 `oh-package.json5` 添加 overrides字段 +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 ```json { @@ -141,8 +151,69 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +### 3.配置 CMakeLists 和引入 TouchIdPackage + +> 若使用的是 <= 4.4.1-0.0.3 版本，请跳过本章。 + +打开 `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 "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +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/react-native-touch-id/src/main/cpp" ./touch_id) + +# 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_touch_id) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： -### 3.在 ArkTs 侧引入 TouchIdPackage +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "TouchIdPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 TouchIdPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： @@ -158,7 +229,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -175,16 +246,13 @@ ohpm install ### 兼容性 - 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库的 Releases 发布地址查看配套的版本信息： +在以下版本验证通过： -| 三方库版本 | 发布信息 | 支持RN版本 | -|-------| ------------------------------------------------------------ | ---------- | -| 4.4.1@deprecated | [@react-native-oh-tpl/react-native-touch-id Releases(deprecated)](https://github.com/react-native-oh-library/react-native-touch-id/releases) | 0.72 | -| 4.4.2 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.72 | -| 4.5.0 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id/releases) | 0.77 | +1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; +2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112; ### 权限要求 @@ -208,10 +276,11 @@ In your `module.json5` > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| isSupported | Whether touchid is supported | function | yes | ios/andriod | yes | -| authenticate | Verify touchid | function | yes | ios/andriod | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ---------------------------- | -------- | -------- | ----------- | ----------------- | +| isSupported | Whether touchid is supported | function | yes | ios/andriod | yes | +| authenticate | Verify touchid | function | yes | ios/andriod | yes | + ## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -220,22 +289,23 @@ In your `module.json5` ### Errors -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| Touch ID Error | Permission verification failed | string | no | harmonry | yes | -| Touch ID Error | Incorrect parameters | string | no | harmonry | yes | -| Touch ID Error | Authentication failed | string | no | harmonry | yes | -| Touch ID Error | The operation is canceled | string | no | harmonry | yes | -| Touch ID Error | The operation is time-out | string | no | harmonry | yes | -| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | -| Touch ID Error | The authentication trust level is not supported | string | no | harmonry | yes | -| Touch ID Error | The authentication task is busy | string | no | harmonry | yes | -| Touch ID Error | The authenticator is locked | string | no | harmonry | yes | -| Touch ID Error | General operation error | string | no | harmonry | no | -| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | -| Touch ID Error | The type of credential has not been enrolled | string | no | harmonry | yes | -| Touch ID Error | The authentication is canceled from widget's navigation button | string | no | harmonry | yes | -| Touch ID Error | Indicates that current authentication failed because of PIN expired | string | no | harmonry | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | ------------------------------------------------------------------- | ------ | -------- | -------- | ----------------- | +| Touch ID Error | Permission verification failed | string | no | harmonry | yes | +| Touch ID Error | Incorrect parameters | string | no | harmonry | yes | +| Touch ID Error | Authentication failed | string | no | harmonry | yes | +| Touch ID Error | The operation is canceled | string | no | harmonry | yes | +| Touch ID Error | The operation is time-out | string | no | harmonry | yes | +| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | +| Touch ID Error | The authentication trust level is not supported | string | no | harmonry | yes | +| Touch ID Error | The authentication task is busy | string | no | harmonry | yes | +| Touch ID Error | The authenticator is locked | string | no | harmonry | yes | +| Touch ID Error | General operation error | string | no | harmonry | no | +| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | +| Touch ID Error | The type of credential has not been enrolled | string | no | harmonry | yes | +| Touch ID Error | The authentication is canceled from widget's navigation button | string | no | harmonry | yes | +| Touch ID Error | Indicates that current authentication failed because of PIN expired | string | no | harmonry | yes | + ## 遗留问题 ## 其他 diff --git a/zh-cn/react-native-track-player.md b/zh-cn/react-native-track-player.md index 3d794de9..9b1f21f4 100644 --- a/zh-cn/react-native-track-player.md +++ b/zh-cn/react-native-track-player.md @@ -12,19 +12,17 @@

- - > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-track-player) 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： -| 三方库版本 | 发布信息 | 支持RN版本 | -| ---------- | ------------------------------------------------------------ | ---------- | -| 4.1.2@deprecated | [@react-native-oh-tpl/react-native-track-player Releases(deprecated)](https://github.com/react-native-oh-library/react-native-track-player/releases) | 0.72 | -| 4.1.3 | [@react-native-ohos/react-native-track-player Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-track-player/releases) | 0.72 | -| 4.2.0 | [@react-native-ohos/react-native-track-player Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-track-player/releases) | 0.77 | +| 三方库版本 | 发布信息 | 支持 RN 版本 | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | +| <= 4.1.2@deprecated | [@react-native-oh-tpl/react-native-track-player Releases(deprecated)](https://github.com/react-native-oh-library/react-native-track-player/releases) | 0.72 | +| 4.1.3 | [@react-native-ohos/react-native-track-player Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-track-player/releases) | 0.72 | +| 4.2.0 | [@react-native-ohos/react-native-track-player Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-track-player/releases) | 0.77 | -对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +对于未发布到 npm 的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装 tgz 包。 ## 安装与使用 @@ -52,103 +50,93 @@ yarn add @react-native-ohos/react-native-track-player ```js import React, { useEffect } from "react"; -import { ScrollView, Text, Button, View, StyleSheet } from 'react-native'; -import TrackPlayer from 'react-native-track-player'; +import { ScrollView, Text, Button, View, StyleSheet } from "react-native"; +import TrackPlayer from "react-native-track-player"; const TrackPlayerDemo = () => { - useEffect(() => { - // Set up the player - TrackPlayer.setupPlayer(); - }, []); - - const addExample = () => { - TrackPlayer.add([ - { - url: "https://ting8.yymp3.com/new27/chengxiang10/1.mp3", - title: "世界这么大还是遇见你", - artist: "程响", - artwork: "https://rntp.dev/example/Longing.jpeg", - duration: 237 - }, - { - url: "https://ting8.yymp3.com/new18/fhzq4/8.mp3", - title: "最炫民族风", - artist: "凤凰传奇", - artwork: "https://rntp.dev/example/Rhythm%20City%20(Demo).jpeg", - duration: 283 - }, { - url: "https://ting8.yymp3.com/new27/jinzhiwen3/1.mp3", - title: "远走高飞", - artist: "金志文", - artwork: "https://rntp.dev/example/Rhythm%20City%20(Demo).jpeg", - duration: 235 - }]); - } - - // 开始播放歌曲 - const startExample = () => { - // Start playing it - TrackPlayer.play(); - } - // 暂停播放歌曲 - const pauseExample = () => { - TrackPlayer.pause(); - } - return ( - - - TrackPlayerDemo - - 添加Track -