From b79d7cd49e5765a670f8d5f6c69a9859fac62b29 Mon Sep 17 00:00:00 2001 From: Louis-C7 Date: Thu, 1 Feb 2024 23:26:42 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I90CZ5]=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=88=B00130=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-gesture-handler.md | 445 ------------------ 1224/react-native-image-picker.md | 271 ----------- ...react-native-keyboard-aware-scroll-view.md | 125 ----- 1224/react-native-linear-gradient.md | 238 ---------- {1224 => zh-cn}/react-native-geolocation.md | 47 +- zh-cn/react-native-image-picker.md | 116 +++-- ...react-native-keyboard-aware-scroll-view.md | 120 +++++ zh-cn/react-native-linear-gradient.md | 76 +-- .../react-native-masked-view-masked-view.md | 31 +- zh-cn/react-native-masked-view.md | 252 ---------- 10 files changed, 275 insertions(+), 1446 deletions(-) delete mode 100644 1224/react-native-gesture-handler.md delete mode 100644 1224/react-native-image-picker.md delete mode 100644 1224/react-native-keyboard-aware-scroll-view.md delete mode 100644 1224/react-native-linear-gradient.md rename {1224 => zh-cn}/react-native-geolocation.md (63%) create mode 100644 zh-cn/react-native-keyboard-aware-scroll-view.md rename 1224/react-native-masked-view.md => zh-cn/react-native-masked-view-masked-view.md (91%) delete mode 100644 zh-cn/react-native-masked-view.md diff --git a/1224/react-native-gesture-handler.md b/1224/react-native-gesture-handler.md deleted file mode 100644 index 66da8565..00000000 --- a/1224/react-native-gesture-handler.md +++ /dev/null @@ -1,445 +0,0 @@ -> 模板版本：v0.1.1 - -

-

react-native-gesture-handler

-

-

- - Supported platforms - - - License - -

- -> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-gesture-handler) - -## 安装与使用 - -进入到工程目录并输入以下命令： - - - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/react-native-gesture-handler -``` - -#### **npm** - -```bash -npm install @react-native-oh-tpl/react-native-gesture-handler -``` - - - -快速使用： - -```js -import React, { Component } from "react"; -import { Animated, Dimensions } from "react-native"; -import { - GestureHandlerRootView, - PanGestureHandler, -} from "react-native-gesture-handler"; - -const { width } = Dimensions.get("screen"); -const circleRadius = 30; - -class Circle extends Component { - _touchX = new Animated.Value(width / 2 - circleRadius); - - _onPanGestureEvent = Animated.event([{ nativeEvent: { x: this._touchX } }], { - useNativeDriver: true, - }); - - render() { - return ( - - - - - - - - ); - } -} - -export default function App() { - return ; -} -``` - -## Link - -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-gesture-handler": "file:../../node_modules/@react-native-tpl-oh/react-native-gesture-handler/harmony/gesture_handler.har" - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-gesture-handler": "file:../../node_modules/@react-native-tpl-oh/react-native-gesture-handler/harmony/gesture_handler" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - -### 配置 CMakeLists 和引入 GestureHandlerPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-gesture-handler/src/main/cpp" ./gesture-handler) -# RNOH_END: add_package_subdirectories - -add_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_gesture_handler) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "GestureHandlerPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 gesture-handler 组件 - -react-native-gesture-handler 在 2.x 版本里，不再从原生端引入 ``，而是在 JS 端添加。详情请看官方说明：[Migrating off RNGHEnabledRootView](https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot)。 - -鸿蒙支持 1.x 在原生端替换 `RootView` 来添加 `` 的方式。 - -**如果使用 2.x 方式，则把后面带有 `1.x` 注释的代码删掉即可** - -打开 `entry/src/main/ets/pages/index.ets`，添加： - -```diff -... -+ import { RNGestureHandlerRootView, RNGestureHandlerButton } from "rnoh-gesture-handler" -+ import { RNGestureHandlerModule } from 'rnoh-gesture-handler/src/main/ets/RNGestureHandlerModule' // 1.x - - @Builder - function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnohContext, - tag: ctx.tag, - buildCustomComponent: CustomComponentBuilder - }) - } -+ else if (ctx.componentName == RNGestureHandlerRootView.NAME){ -+ RNGestureHandlerRootView({ -+ ctx: ctx.rnohContext, -+ tag: ctx.tag, -+ buildCustomComponent: CustomComponentBuilder -+ }) -+ } else if (ctx.componentName == RNGestureHandlerButton.DESCRIPTOR_TYPE){ -+ RNGestureHandlerButton({ -+ ctx: ctx.rnohContext, -+ tag: ctx.tag, -+ buildCustomComponent: CustomComponentBuilder -+ }) -+ } - ... - } - ... - build() { - Column() { - if (this.rnAbility && this.shouldShow) { - RNApp({ -+ onSetUp: (rnInstance) => { // 1.x -+ rnInstance.bindComponentNameToDescriptorType(RNGestureHandlerRootView.NAME, "RootView") // 1.x -+ rnInstance.getTurboModule(RNGestureHandlerModule.NAME).install() // 1.x -+ }, // 1.x - ... - }) - } - } - .height('100%') - .width('100%') - } -``` - -### 在 ArkTs 侧引入 Gesture Handler Package - -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： - -```diff -... -+ import { GestureHandlerPackage } from 'rnoh-gesture-handler/ts'; - -export function createRNPackages(ctx: RNPackageContext): RNPackage[] { - return [ - new SamplePackage(ctx), -+ new GestureHandlerPackage(ctx), - ]; -} -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 - -## 约束与限制 - -### 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-gesture-handler Releases](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) - -> [!tip] [官方文档](https://docs.swmansion.com/react-native-gesture-handler/docs/) - -## Gestures - -### Gesture detector - -GestureDetector 是 Gesture Handler 库 2.x 版本的一个主要组件。 - -#### Gesture detector 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | -| gesture | A gesture object containing the configuration and callbacks. | base gestures or any ComposedGesture | yes | All | yes | -| userSelect | This parameter allows to specify which userSelect property should be applied to underlying view. | ("none" \| "auto" \| "text") | no | Web | no | - -目前 GestureDetector 支持: - -`Gesture.Tap() ` - -Creates a new instance of [TapGesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture) with its default config and no callbacks. - -`Gesture.Pan()` - -Creates a new instance of [PanGesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture) with its default config and no callbacks. - -## Components - -### Touchables - -Gesture Handler 库提供了一种基于原生按钮的 React Native touchable 组件的实现，它不依赖于 React Native 的 JS responder system。这些组件的实现遵循相同的API，旨在替代 React Native 中的 touchable 组件 - -目前支持： - -- [Touchable Opacity](https://reactnative.dev/docs/touchableopacity) - -- [Touchable Without Feedback](https://reactnative.dev/docs/touchablewithoutfeedback) - -## Gesture handlers(legacy) - -> [!WARNING] Consider using the new [gestures API](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture) instead. The old API is not actively supported and is not receiving the new features. Check out [RNGH 2.0 section in Introduction](https://docs.swmansion.com/react-native-gesture-handler/docs/#rngh-20) for more information. - -### Gesture handlers 通用属性 - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | -| enabled | Indicates whether the given handler should be analyzing stream of touch events or not. | boolean | no | All | yes | -| shouldCancelWhenOutside | When true the handler will cancel or fail recognition (depending on its current state) whenever the finger leaves the area of the connected view. | boolean | no | All | no | -| cancelsTouchesInView | When true, the handler will cancel touches for native UI components (UIButton, UISwitch, etc) it's attached to when it becomes ACTIVE. | boolean | no | iOS | no | -| simultaneousHandlers | When set, the handler will be allowed to activate even if one or more of the handlers provided by their refs are in an ACTIVE state. | refs | no | All | no | -| waitFor | When set the handler will not activate as long as the handlers provided by their refs are in the BEGAN state. | refs | no | All | no | -| hitSlop | This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture. | object | no | All | yes | -| userSelect | This parameter allows to specify which userSelect property should be applied to underlying view. | ("none" \| "auto" \| "text") | no | Web | no | -| activeCursor | This parameter allows to specify which cursor should be used when gesture activates. | CSS cursor values | no | Web | no | -| onGestureEvent | Takes a callback that is going to be triggered for each subsequent touch event while the handler is in an ACTIVE state. | callback | no | All | yes | -| onHandlerStateChange | Takes a callback that is going to be triggered when state of the given handler changes. | callback | no | All | yes | - -### Gesture handlers 通用事件数据 - -以下是提供给 `onGestureEvent` 和 `onHandlerStateChange` 回调的通用事件数据: - -| 名称 | 说明 | 类型 | 原库平台 | 鸿蒙支持 | -| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -| state | Current state of the handler. | State | All | yes | -| numberOfPointers | Represents the number of pointers (fingers) currently placed on the screen. | number | All | yes | - -### PanGestureHandler - -#### PanGestureHandler 属性 - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | -| minDist | Minimum distance the finger (or multiple finger) need to travel before the handler activates. | number | no | All | yes | -| minPointers | A number of fingers that is required to be placed before handler can activate. | number | no | All | yes | -| maxPointers | When the given number of fingers is placed on the screen and handler hasn't yet activated it will fail recognizing the gesture. | number | no | All | yes | -| activeOffsetX | Range along X axis (in points) where fingers travels without activation of handler. | number | no | All | yes | -| activeOffsetY | Range along Y axis (in points) where fingers travels without activation of handler. | number | no | All | yes | -| failOffsetY | When the finger moves outside this range (in points) along Y axis and handler hasn't yet activated it will fail recognizing the gesture. | number | no | All | yes | -| failOffsetX | When the finger moves outside this range (in points) along X axis and handler hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number. | number | no | All | yes | -| maxDeltaX | This method is deprecated but supported for backward compatibility. Instead of using maxDeltaX={N} you can do failOffsetX={[-N, N]}. | number | no | All | yes | -| maxDeltaY | This method is deprecated but supported for backward compatibility. Instead of using maxDeltaY={N} you can do failOffsetY={[-N, N]}. | number | no | All | yes | -| minOffsetX | This method is deprecated but supported for backward compatibility. Instead of using minOffsetX={N} you can do activeOffsetX={N}. | number | no | All | yes | -| minOffsetY | This method is deprecated but supported for backward compatibility. Instead of using minOffsetY={N} you can do activeOffsetY={N}. | number | no | All | yes | -| minDeltaX | This method is deprecated but supported for backward compatibility. Instead of using minDeltaX={N} you can do activeOffsetX={[-N, N]}. | number | no | All | yes | -| minDeltaY | This method is deprecated but supported for backward compatibility. Instead of using minDeltaY={N} you can do activeOffsetY={[-N, N]}. | number | no | All | yes | -| avgTouches | Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). | number | no | Android | no | -| enableTrackpadTwoFingerGesture | Enables two-finger gestures on supported devices, for example iPads with trackpads. | boolean | no | iOS | no | - -#### PanGestureHandler 事件数据 - -请到查看[基础 handler 类的通用事件数据](#gesture-handlers-通用事件数据)。以下是 PanGestureHandler 特有的事件数据。 - -`translationX` - -Translation of the pan gesture along X axis accumulated over the time of the gesture. The value is expressed in the point units. - -`translationY` - -Translation of the pan gesture along Y axis accumulated over the time of the gesture. The value is expressed in the point units. - -`velocityX` - -Velocity of the pan gesture along the X axis in the current moment. The value is expressed in point units per second. - -`velocityY` - -Velocity of the pan gesture along the Y axis in the current moment. The value is expressed in point units per second. - -`x` - -X coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. Expressed in point units. - -`y` - -Y coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. Expressed in point units. - -### TapGestureHandler - -#### TapGestureHandler 属性 - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | -| minPointers | Minimum number of pointers (fingers) required to be placed before the handler activates. | number | no | All | yes | -| maxDurationMs | Maximum time, expressed in milliseconds, that defines how fast a finger must be released after a touch. | number | no | All | yes | -| maxDelayMs | Maximum time, expressed in milliseconds, that can pass before the next tap — if many taps are required. | number | no | All | yes | -| maxDeltaX | Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture. | number | no | All | yes | -| maxDeltaY | Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture. | number | no | All | yes | -| maxDist | Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. | number | no | All | yes | - -#### TapGestureHandler 事件数据 - -请到查看[基础 handler 类的通用事件数据](#gesture-handlers-通用事件数据)。以下是 TapGestureHandler 特有的事件数据。 - -`x` - -X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. - -`y` - -Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. - -`absoluteX` - -X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteX instead of x in cases when the view attached to the handler can be transformed as an effect of the gesture. - -`absoluteY` - -Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteY instead of y in cases when the view attached to the handler can be transformed as an effect of the gesture. - -## 遗留问题 - -- 目前只支持 Pan 和 Tag 手势 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-linear-gradient/blob/harmony/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/react-native-image-picker.md b/1224/react-native-image-picker.md deleted file mode 100644 index 446ebccc..00000000 --- a/1224/react-native-image-picker.md +++ /dev/null @@ -1,271 +0,0 @@ -> 模板版本：v0.1.2 - -

-

react-native-image-picker

-

-

- - Supported platforms - - - License - -

- -> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-image-picker) - -## 安装与使用 - - - - - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/react-native-image-picker -``` - -#### **npm** - -```bash -npm install @react-native-oh-tpl/react-native-image-picker -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import React from 'react'; -import { View, Text } from 'react-native'; -import { launchImageLibrary } from 'react-native-image-picker'; - -const App = () => { - const [urlInfo, setUrlInfo] = React.useState(); - return ( - - { - launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 }, (data) => { - if (data.assets?.length) { - setUrlInfo(JSON.stringify(data.assets)) - } - }) - }}> - 选择 - - {urlInfo} - - ); -}; - -export default App; -``` - -## Link - -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-image-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-picker/harmony/image_picker.har" - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-image-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-picker/harmony/image_picker" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - -### 配置 CMakeLists 和引入 ImagePickerViewPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-image-picker/src/main/cpp" ./image_picker) -# RNOH_END: add_package_subdirectories - -add_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_image_picker) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "RNImagePickerPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 ImagePickerViewPackage - -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： - -```diff -import type {RNPackageContext, RNPackage} from 'rnoh/ts'; -import {SamplePackage} from 'rnoh-sample-package/ts'; -+ import {ImagePickerViewPackage} from 'rnoh-image-picker/ts'; - -export function createRNPackages(ctx: RNPackageContext): RNPackage[] { - return [ - new SamplePackage(ctx), -+ new ImagePickerViewPackage(ctx) - ]; -} -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 - -## 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-picker Releases](https://github.com/react-native-oh-library/react-native-image-picker/releases) - -## 属性 - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -### Options - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | --------------- | -------- | -| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes | -| maxWidth | To resize the image. | number | no | iOS Android | no | -| maxHeight | To resize the image. | number | no | iOS Android | no | -| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no | -| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no | -| quality | 0 to 1, photos. | number | no | iOS Android | no | -| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | no | -| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | no | -| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no | -| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no | -| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13, Use 0 to allow up to 50 files on HarmonyOS. Default is 1. | number | no | iOS Android Web | yes | -| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no | -| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no | -| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | boolean | no | iOS | no | - -### The Response Object - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------ | ------------------------------------------------------- | ------- | -------- | --------------- | -------- | -| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes | -| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no | -| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no | -| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes | - -### Asset Object - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | --------------- | -------- | -| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | no | -| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes | -| originalPath | The original file path. | string | yes | iOS Android Web | yes | -| width | Asset dimensions | number | yes | iOS Android Web | yes | -| height | Asset dimensions | number | yes | iOS Android Web | yes | -| fileSize | The file size | number | yes | iOS Android | yes | -| type | The file type | string | yes | iOS Android | yes | -| fileName | The file name | string | yes | iOS Android | yes | -| duration | The selected video duration in seconds | number | no | iOS Android | no | -| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no | -| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | no | -| id | local identifier of the photo or video. On Android & HarmonyOS, this is the same as fileName | string | no | iOS Android | yes | - -## 静态方法 - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------ | -------------------------------------- | -------- | -------- | --------------- | -------- | -| launchCamera | Launch camera to take photo or video. | function | yes | iOS Android Web | no | -| launchImageLibrary | Launch gallery to pick image or video. | function | yes | iOS Android Web | yes | - -## 遗留问题 - -- 只实现了选择图库的接口属性，相机功能暂未适配 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-native-image-picker/react-native-image-picker/blob/main/LICENSE.md) ，请自由地享受和参与开源。 diff --git a/1224/react-native-keyboard-aware-scroll-view.md b/1224/react-native-keyboard-aware-scroll-view.md deleted file mode 100644 index 5ed15df9..00000000 --- a/1224/react-native-keyboard-aware-scroll-view.md +++ /dev/null @@ -1,125 +0,0 @@ -> 模板版本：v0.1.2 - -

-

react-native-keyboard-aware-scroll-view

-

-

- - Supported platforms - - - License - -

- - ->[!tip] [Github 地址](https://github.com/APSL/react-native-keyboard-aware-scroll-view) - -## 安装与使用 - -进入到工程目录并输入以下命令： - - - -#### **yarn** - -```bash -yarn add react-native-keyboard-aware-scroll-view@0.9.5 -``` -#### **npm** - -```bash -npm install react-native-keyboard-aware-scroll-view@0.9.5 --save -``` - - - -下面的代码展示了这个库的基本使用场景： - -```tsx -import React from 'react'; -import { - TextInput, - StyleSheet, - ScrollView, -} from 'react-native'; -import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'; - - -const KasvCom: React.FC = (): JSX.Element => { - return ( - <> - - - - - - - ); -}; - -const styles = StyleSheet.create({ - input: { - width: '90%', - marginLeft: '5%', - borderWidth: 2, - borderColor: 'black', - height: 40, - borderRadius: 10, - fontSize: 26, - paddingLeft: 6, - marginTop: 10, - marginBottom: 10, - } -}); - -export default KasvCom; -``` - -## 约束与限制 - -### 兼容性 - - 在下述版本验证通过： - - 1. IDE：DevEco Studio 4.1.3.500;SDK：HarmonyOS(api11) 4.1.5.6;测试设备：Mate60(BRA-AL00);ROM：2.0.0.50(SP2DEVC00E60R4P1log);RNOH：0.72.13 - -## 属性 - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -以下属性已验证，详情见 [react-native-keyboard-aware-scroll-view源库地址](https://github.com/APSL/react-native-keyboard-aware-scroll-view) - -**组件 KeyboardAwareScrollView** - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ---- | ---- | -------- | -------- | -------- | -| viewIsInsideTabBar | Adds an extra offset that represents the `TabBarIOS` height. | boolean | NO | All | NO | -| resetScrollToCoords | Coordinates that will be used to reset the scroll when the keyboard hides. | Object: {x: number, y: number} | NO | All | NO | -| enableAutomaticScroll | When focus in `TextInput` will scroll the position, default is enabled. | boolean | NO | All | NO | -| extraHeight | Adds an extra offset when focusing the `TextInput`s. | number | NO | All | NO | -| extraScrollHeight | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. | number | NO | All | NO | -| enableResetScrollToCoords | Lets the user enable or disable automatic resetScrollToCoords. | boolean | NO | All | NO | -| keyboardOpeningTime | Sets the delay time before scrolling to new position, default is 250 | number | NO | IOS | NO | -| keyboardWillShow | What to do when the keyboard is about to appear | (event?) => void | NO | IOS | NO | -| keyboardDidShow | What to do when the keyboard appears | (event?) => void | NO | All | Yes | -| keyboardWillHide | What to do when the keyboard is about to be hidden | (event?) => void | NO | IOS | NO | -| keyboardDidHide | What to do when hiding the keyboard | (event?) => void | NO | All | Yes | -| keyboardWillChangeFrame | When the keyboard status is about to change | (event?) => void | NO | IOS | NO | -| keyboardDidChangeFrame | When the keyboard status changes | (event?) => void | NO | IOS | NO | -| scrollToPosition | Scroll to specific position with or without animation. | (x: number, y: number, animated: bool = true) => void | NO | All | Yes | -| scrollToEnd | Scroll to end with or without animation. | (animated?: bool = true) => void | NO | All | Yes | -| scrollIntoView | Scrolls an element inside a KeyboardAwareScrollView into view. | (element: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }) => void | NO | All | NO | - - -## 遗留问题 - -- [ ] 受RNOH侧UIManager.viewIsDescendantOf() API的影响，键盘事件判断后的回调函数无法执行，导致主动视图Scroll滚动API均无法生效。 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/meliorence/react-native-render-html/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/react-native-linear-gradient.md b/1224/react-native-linear-gradient.md deleted file mode 100644 index ba6ddbd8..00000000 --- a/1224/react-native-linear-gradient.md +++ /dev/null @@ -1,238 +0,0 @@ -> 模板版本：v0.1.2 - -

-

react-native-linear-gradient

-

-

- - Supported platforms - - - License - - -

- -> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-linear-gradient) - -## 安装与使用 - -进入到工程目录并输入以下命令： - - - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/react-native-linear-gradient -``` - -#### **npm** - -```bash -npm install @react-native-oh-tpl/react-native-linear-gradient -``` - - - -快速使用： - -```js -import LinearGradient from "react-native-linear-gradient"; - -// Within your render function - - Sign in with Facebook -; - -// Later on in your styles.. -var styles = StyleSheet.create({ - linearGradient: { - flex: 1, - paddingLeft: 15, - paddingRight: 15, - borderRadius: 5, - }, - buttonText: { - fontSize: 18, - fontFamily: "Gill Sans", - textAlign: "center", - margin: 10, - color: "#ffffff", - backgroundColor: "transparent", - }, -}); -``` - -## Link - -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-linear-gradient": "file:../../node_modules/@react-native-oh-tpl/react-native-linear-gradient/harmony/linear_gradient.har" - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-linear-gradient": "file:../../node_modules/@react-native-oh-tpl/react-native-linear-gradient/harmony/linear_gradient" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - -### 配置 CMakeLists 和引入 LinearGradientPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-linear-gradient/src/main/cpp" ./linear-gradient) -# RNOH_END: add_package_subdirectories - -add_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_linear_gradient) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "LinearGradientPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 linear-gradient 组件 - -打开 `entry/src/main/ets/pages/index.ets`，添加： - -```diff -+ import { RNLinearGradient, LINEAR_GRADIENT_TYPE, LinearGradientDescriptor } from "rnoh-linear-gradient" - - @Builder - function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnohContext, - tag: ctx.tag, - buildCustomComponent: CustomComponentBuilder - }) - } -+ else if (ctx.componentName === LINEAR_GRADIENT_TYPE) { -+ RNLinearGradient({ -+ ctx: ctx.rnohContext, -+ tag: ctx.tag, -+ buildCustomComponent: CustomComponentBuilder -+ }) -+ } - ... - } - ... -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 - -## 约束与限制 - -## 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-linear-gradient Releases](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) - -## 属性 - -> [!tip] "鸿蒙支持"列为 yes 的 API 表示支持鸿蒙平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | ------- | -| colors | Color Array | (string\|number)[] | NO | All | yes | -| locations | Color for unknown array (length 0 or the same as colors) | number[] | NO | All | yes | -| useAngle | Use angle (default false) | boolean | NO | All | yes | -| angle | Angle (useAngle=true valid) | number | NO | All | yes | -| angleCenter | Middle angle coordinate | { x: number,y: number} | NO | All | no | -| start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | -| end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-linear-gradient/blob/harmony/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/react-native-geolocation.md b/zh-cn/react-native-geolocation.md similarity index 63% rename from 1224/react-native-geolocation.md rename to zh-cn/react-native-geolocation.md index a1d08637..67743a8f 100644 --- a/1224/react-native-geolocation.md +++ b/zh-cn/react-native-geolocation.md @@ -16,24 +16,32 @@ ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/react-native-geolocation Releases](https://github.com/react-native-oh-library/react-native-geolocation/releases)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： +> [!TIP] # 处替换为 tgz 包的路径 + -#### **yarn** +#### **npm** ```bash -yarn add @react-native-oh-tpl/react-native-geolocation +npm install @react-native-oh-tpl/react-native-geolocation@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install @react-native-oh-tpl/react-native-geolocation +yarn add @react-native-oh-tpl/react-native-geolocation@file:# ``` + + 下面的代码展示了这个库的基本使用场景： +> [!WARNING] 使用时 import 的库名不变。 + ```js // setRNConfiguration 为例 Geolocation.setRNConfiguration( @@ -59,7 +67,11 @@ Geolocation.setRNConfiguration( 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； 2. 直接链接源码。 -方法一：通过 har 包引入打开 `entry/oh-package.json5`，添加以下依赖 +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { @@ -78,6 +90,9 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json @@ -142,8 +157,6 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` - - ### 在 ArkTs 侧引入 GeolocationPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： @@ -173,7 +186,6 @@ ohpm install 然后编译、运行即可。 - ### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 @@ -196,22 +208,19 @@ ohpm install } ``` - - - ## 属性 > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support |Notes| -| ---- | ----------- | ---- | -------- | -------- | -------- | -------- | -| setRNConfiguration | Sets configuration options that will be used in all location requests | function(config) | NO | IOS Android | partially | config仅支持skipPermissionRequests | -| requestAuthorization | Request suitable Location permission | function(success,error) | YES | IOS Android | partially | success支持,error仅支持code与message | -| getCurrentPosition | Invokes the success callback once with the latest location info | function(success(position),error(error),option) | NO | IOS Android | partially | position中仅altitudeAccuracy不支持,option仅支持timeout与maximumAge,error仅支持code与message | -| watchPosition | Invokes the success callback whenever the location changes. Returns a watchId (number) | function(success(postion),error(error),option) | NO | IOS Android | partially | position中仅altitudeAccuracy不支持,error仅支持code与message,option仅支持interval与distanceFilter| -| clearWatch | Clears watch observer by id returned by watchPosition() | function(watchID) | NO | IOS Android | yes | watchID仅支持默认值0 | +| Name | Description | Type | Required | Platform | HarmonyOS Support | Notes | +| -------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------- | -------- | ----------- | ----------------- | ----------------------------------------------------------------------------------------------------------- | +| setRNConfiguration | Sets configuration options that will be used in all location requests | function(config) | NO | IOS Android | partially | config 仅支持 skipPermissionRequests | +| requestAuthorization | Request suitable Location permission | function(success,error) | YES | IOS Android | partially | success 支持,error 仅支持 code 与 message | +| getCurrentPosition | Invokes the success callback once with the latest location info | function(success(position),error(error),option) | NO | IOS Android | partially | position 中仅 altitudeAccuracy 不支持,option 仅支持 timeout 与 maximumAge,error 仅支持 code 与 message | +| watchPosition | Invokes the success callback whenever the location changes. Returns a watchId (number) | function(success(postion),error(error),option) | NO | IOS Android | partially | position 中仅 altitudeAccuracy 不支持,error 仅支持 code 与 message,option 仅支持 interval 与 distanceFilter | +| clearWatch | Clears watch observer by id returned by watchPosition() | function(watchID) | NO | IOS Android | yes | watchID 仅支持默认值 0 | ## 遗留问题 @@ -221,4 +230,4 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License(MIT)](https://github.com/react-native-oh-library/react-native-geolocation/blob/sig/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License(MIT)](https://github.com/react-native-oh-library/react-native-geolocation/blob/sig/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-image-picker.md b/zh-cn/react-native-image-picker.md index 5f9c3121..adaeaf5f 100644 --- a/zh-cn/react-native-image-picker.md +++ b/zh-cn/react-native-image-picker.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.3

react-native-image-picker

@@ -12,28 +12,36 @@

+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-image-picker) + ## 安装与使用 - +请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/<库名> Releases](https://github.com/react-native-oh-library/react-native-image-picker/releases)，并下载适用版本的 tgz 包。 -**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-image-picker/releases)中获取库 tgz，通过使用本地依赖来安装本库。** +进入到工程目录并输入以下命令： -#### **yarn** +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** ```bash -yarn add xxx +npm install @react-native-oh-tpl/react-native-image-picker@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install xxx +yarn add @react-native-oh-tpl/react-native-image-picker@file:# ``` 下面的代码展示了这个库的基本使用场景： +> [!WARNING] 使用时 import 的库名不变。 + ```js import React from 'react'; import { View, Text } from 'react-native'; @@ -81,12 +89,15 @@ export default App; 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-image-picker": "file:../../node_modules/react-native-image-picker/harmony/image_picker.har" + "rnoh-image-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-picker/harmony/image_picker.har" } ``` @@ -100,12 +111,15 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-image-picker": "file:../../node_modules/react-native-image-picker/harmony/image_picker" + "rnoh-image-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-picker/harmony/image_picker" } ``` @@ -202,57 +216,61 @@ ohpm install ## 属性 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + ### Options -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | --------------- | -------- | -| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes | -| maxWidth | To resize the image. | number | no | iOS Android | no | -| maxHeight | To resize the image. | number | no | iOS Android | no | -| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no | -| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no | -| quality | 0 to 1, photos. | number | no | iOS Android | no | -| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | no | -| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | no | -| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no | -| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no | -| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13. Default is 1. | number | no | iOS Android Web | yes | -| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no | -| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no | -| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | boolean | no | iOS | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | --------------- | ----------------- | +| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes | +| maxWidth | To resize the image. | number | no | iOS Android | no | +| maxHeight | To resize the image. | number | no | iOS Android | no | +| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no | +| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no | +| quality | 0 to 1, photos. | number | no | iOS Android | no | +| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | no | +| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | no | +| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no | +| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no | +| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13, Use 0 to allow up to 50 files on HarmonyOS. Default is 1. | number | no | iOS Android Web | yes | +| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no | +| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no | +| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | boolean | no | iOS | no | ### The Response Object -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------ | ------------------------------------------------------- | ------- | -------- | --------------- | -------- | -| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes | -| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no | -| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no | -| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ------------------------------------------------------- | ------- | -------- | --------------- | ----------------- | +| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes | +| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no | +| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no | +| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes | ### Asset Object -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | --------------- | -------- | -| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | no | -| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes | -| originalPath | The original file path. | string | yes | iOS Android Web | yes | -| width | Asset dimensions | number | yes | iOS Android Web | yes | -| height | Asset dimensions | number | yes | iOS Android Web | yes | -| fileSize | The file size | number | yes | iOS Android | yes | -| type | The file type | string | yes | iOS Android | yes | -| fileName | The file name | string | yes | iOS Android | yes | -| duration | The selected video duration in seconds | number | no | iOS Android | no | -| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no | -| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | no | -| id | local identifier of the photo or video. On Android, this is the same as fileName | string | no | iOS Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | --------------- | ----------------- | +| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | no | +| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes | +| originalPath | The original file path. | string | yes | iOS Android Web | yes | +| width | Asset dimensions | number | yes | iOS Android Web | yes | +| height | Asset dimensions | number | yes | iOS Android Web | yes | +| fileSize | The file size | number | yes | iOS Android | yes | +| type | The file type | string | yes | iOS Android | yes | +| fileName | The file name | string | yes | iOS Android | yes | +| duration | The selected video duration in seconds | number | no | iOS Android | no | +| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no | +| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | no | +| id | local identifier of the photo or video. On Android & HarmonyOS, this is the same as fileName | string | no | iOS Android | yes | ## 静态方法 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------ | -------------------------------------- | -------- | -------- | --------------- | -------- | -| launchCamera | Launch camera to take photo or video. | function | yes | iOS Android Web | no | -| launchImageLibrary | Launch gallery to pick image or video. | function | yes | iOS Android Web | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | -------------------------------------- | -------- | -------- | --------------- | ----------------- | +| launchCamera | Launch camera to take photo or video. | function | yes | iOS Android Web | no | +| launchImageLibrary | Launch gallery to pick image or video. | function | yes | iOS Android Web | yes | ## 遗留问题 diff --git a/zh-cn/react-native-keyboard-aware-scroll-view.md b/zh-cn/react-native-keyboard-aware-scroll-view.md new file mode 100644 index 00000000..c688fc73 --- /dev/null +++ b/zh-cn/react-native-keyboard-aware-scroll-view.md @@ -0,0 +1,120 @@ +> 模板版本：v0.1.3 + +

+

react-native-keyboard-aware-scroll-view

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/APSL/react-native-keyboard-aware-scroll-view) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-keyboard-aware-scroll-view@0.9.5 +``` + +#### **yarn** + +```bash +yarn add react-native-keyboard-aware-scroll-view@0.9.5 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```tsx +import React from "react"; +import { TextInput, StyleSheet, ScrollView } from "react-native"; +import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; + +const KasvCom: React.FC = (): JSX.Element => { + return ( + <> + + + + + + + ); +}; + +const styles = StyleSheet.create({ + input: { + width: "90%", + marginLeft: "5%", + borderWidth: 2, + borderColor: "black", + height: 40, + borderRadius: 10, + fontSize: 26, + paddingLeft: 6, + marginTop: 10, + marginBottom: 10, + }, +}); + +export default KasvCom; +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; +2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +以下属性已验证，详情见 [react-native-keyboard-aware-scroll-view 源库地址](https://github.com/APSL/react-native-keyboard-aware-scroll-view) + +**组件 KeyboardAwareScrollView** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| viewIsInsideTabBar | Adds an extra offset that represents the `TabBarIOS` height. | boolean | NO | All | NO | +| resetScrollToCoords | Coordinates that will be used to reset the scroll when the keyboard hides. | Object: {x: number, y: number} | NO | All | NO | +| enableAutomaticScroll | When focus in `TextInput` will scroll the position, default is enabled. | boolean | NO | All | NO | +| extraHeight | Adds an extra offset when focusing the `TextInput`s. | number | NO | All | NO | +| extraScrollHeight | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. | number | NO | All | NO | +| enableResetScrollToCoords | Lets the user enable or disable automatic resetScrollToCoords. | boolean | NO | All | NO | +| keyboardOpeningTime | Sets the delay time before scrolling to new position, default is 250 | number | NO | IOS | NO | +| keyboardWillShow | What to do when the keyboard is about to appear | (event?) => void | NO | IOS | NO | +| keyboardDidShow | What to do when the keyboard appears | (event?) => void | NO | All | Yes | +| keyboardWillHide | What to do when the keyboard is about to be hidden | (event?) => void | NO | IOS | NO | +| keyboardDidHide | What to do when hiding the keyboard | (event?) => void | NO | All | Yes | +| keyboardWillChangeFrame | When the keyboard status is about to change | (event?) => void | NO | IOS | NO | +| keyboardDidChangeFrame | When the keyboard status changes | (event?) => void | NO | IOS | NO | +| scrollToPosition | Scroll to specific position with or without animation. | (x: number, y: number, animated: bool = true) => void | NO | All | Yes | +| scrollToEnd | Scroll to end with or without animation. | (animated?: bool = true) => void | NO | All | Yes | +| scrollIntoView | Scrolls an element inside a KeyboardAwareScrollView into view. | (element: React.Element<\*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }) => void | NO | All | NO | + +## 遗留问题 + +- [ ] 受 RNOH 侧 UIManager.viewIsDescendantOf() API 的影响，键盘事件判断后的回调函数无法执行，导致主动视图 Scroll 滚动 API 均无法生效。 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/meliorence/react-native-render-html/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-linear-gradient.md b/zh-cn/react-native-linear-gradient.md index 8e6d38b5..281fc2f0 100644 --- a/zh-cn/react-native-linear-gradient.md +++ b/zh-cn/react-native-linear-gradient.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.2

react-native-linear-gradient

@@ -9,33 +9,38 @@ License -

+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-linear-gradient) + ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/react-native-linear-gradient Releases](https://github.com/react-native-oh-library/react-native-linear-gradient/releases)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： - +> [!TIP] # 处替换为 tgz 包的路径 -**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-linear-gradient/releases)中获取库 tgz，通过使用本地依赖来安装本库。** + -#### **yarn** +#### **npm** ```bash -yarn add xxx +npm install @react-native-oh-tpl/react-native-linear-gradient@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install xxx +yarn add @react-native-oh-tpl/react-native-linear-gradient@file:# ``` -快速使用： +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 ```js import LinearGradient from "react-native-linear-gradient"; @@ -81,12 +86,15 @@ var styles = StyleSheet.create({ 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-linear-gradient": "file:../../node_modules/react-native-linear-gradient/harmony/linear_gradient.har" + "rnoh-linear-gradient": "file:../../node_modules/@react-native-oh-tpl/react-native-linear-gradient/harmony/linear_gradient.har" } ``` @@ -100,12 +108,15 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-linear-gradient": "file:../../node_modules/react-native-linear-gradient/harmony/linear_gradient" + "rnoh-linear-gradient": "file:../../node_modules/@react-native-oh-tpl/react-native-linear-gradient/harmony/linear_gradient" } ``` @@ -169,31 +180,22 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/pages/index.ets`，添加： ```diff -import { - RNApp, - ComponentBuilderContext, - RNAbility, - AnyJSBundleProvider, - MetroJSBundleProvider, - ResourceJSBundleProvider, -} from 'rnoh' -import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -import { createRNPackages } from '../RNPackagesFactory' +... + import { RNLinearGradient, LINEAR_GRADIENT_TYPE, LinearGradientDescriptor } from "rnoh-linear-gradient" @Builder function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, + tag: ctx.tag, buildCustomComponent: CustomComponentBuilder }) } -+ else if (ctx.descriptor.type === LINEAR_GRADIENT_TYPE) { ++ else if (ctx.componentName === LINEAR_GRADIENT_TYPE) { + RNLinearGradient({ + ctx: ctx.rnohContext, -+ tag: ctx.descriptor.tag, ++ tag: ctx.tag, + buildCustomComponent: CustomComponentBuilder + }) + } @@ -215,6 +217,8 @@ ohpm install 然后编译、运行即可。 +## 约束与限制 + ## 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 @@ -223,15 +227,19 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | -| colors | Color Array | (string\|number)[] | NO | All | yes | -| locations | Color for unknown array (length 0 or the same as colors) | number[] | NO | All | yes | -| useAngle | Use angle (default false) | boolean | NO | All | yes | -| angle | Angle (useAngle=true valid) | number | NO | All | yes | -| angleCenter | Middle angle coordinate | { x: number,y: number} | NO | All | no | -| start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | -| end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | +> [!tip] "鸿蒙支持"列为 yes 的 API 表示支持鸿蒙平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | ----------------- | +| colors | Color Array | (string\|number)[] | NO | All | yes | +| locations | Color for unknown array (length 0 or the same as colors) | number[] | NO | All | yes | +| useAngle | Use angle (default false) | boolean | NO | All | yes | +| angle | Angle (useAngle=true valid) | number | NO | All | yes | +| angleCenter | Middle angle coordinate | { x: number,y: number} | NO | All | no | +| start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | +| end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | ## 遗留问题 diff --git a/1224/react-native-masked-view.md b/zh-cn/react-native-masked-view-masked-view.md similarity index 91% rename from 1224/react-native-masked-view.md rename to zh-cn/react-native-masked-view-masked-view.md index b1b70f43..6d5f2da1 100644 --- a/1224/react-native-masked-view.md +++ b/zh-cn/react-native-masked-view-masked-view.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

@react-native-masked-view/masked-view

@@ -16,26 +16,32 @@ ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/<库名> Releases](https://github.com/react-native-oh-library/masked-view/releases)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： +>[!TIP] # 处替换为 tgz 包的路径 + -#### **yarn** +#### **npm** ```bash -yarn add @react-native-oh-tpl/masked-view +npm install @react-native-oh-tpl/masked-view@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install @react-native-oh-tpl/masked-view +yarn add @react-native-oh-tpl/masked-view@file:# ``` 下面的代码展示了这个库的基本使用场景： +>[!WARNING] 使用时 import 的库名不变。 + ```js import MaskedView from "@react-native-masked-view/masked-view"; @@ -85,6 +91,9 @@ import MaskedView from "@react-native-masked-view/masked-view"; 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json @@ -104,6 +113,9 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json @@ -173,14 +185,7 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/pages/index.ets`，添加： ```diff -import { - RNApp, - ComponentBuilderContext, - RNAbility, - AnyJSBundleProvider, - MetroJSBundleProvider, - ResourceJSBundleProvider, -} from 'rnoh' +... import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" import { createRNPackages } from '../RNPackagesFactory' + import { MaskedView, MASKED_VIEW_TYPE } from "rnoh-masked-view" diff --git a/zh-cn/react-native-masked-view.md b/zh-cn/react-native-masked-view.md deleted file mode 100644 index 5cacc1b8..00000000 --- a/zh-cn/react-native-masked-view.md +++ /dev/null @@ -1,252 +0,0 @@ -> 模板版本：v0.0.1 - -

-

@react-native-masked-view/masked-view

-

-

- - Supported platforms - - - License - -

- -## 安装与使用 - -> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 - -在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 - -```bash -@react-native-oh-library:registry=https://npm.pkg.github.com -//npm.pkg.github.com/:_authToken=TOKEN -``` - -进入到工程目录并输入以下命令： - - - -**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/masked-view/releases)中获取库 tgz，通过使用本地依赖来安装本库。** - -#### **yarn** - -```bash -yarn add xxx -``` - -#### **npm** - -```bash -npm install xxx -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import MaskedView from "@react-native-masked-view/masked-view"; - - - - Basic Mask - - - } -> - {/* Shows behind the mask, you can put anything here, such as an image */} - - - - -; -``` - -## Link - -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-masked-view": "file:../../node_modules/@react-native-masked-view/masked-view/harmony/masked_view.har", - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-masked-view": "file:../../node_modules/@react-native-masked-view/masked-view/harmony/masked_view" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - -### 配置 CMakeLists 和引入 MaskedPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-masked-view/src/main/cpp" ./masked-view) -# RNOH_END: add_package_subdirectories - -add_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_masked_view) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "MaskedPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 MaskedView 组件 - -打开 `entry/src/main/ets/pages/index.ets`，添加： - -```diff -import { - RNApp, - ComponentBuilderContext, - RNAbility, - AnyJSBundleProvider, - MetroJSBundleProvider, - ResourceJSBundleProvider, -} from 'rnoh' -import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -import { createRNPackages } from '../RNPackagesFactory' -+ import { MaskedView, MASKED_VIEW_TYPE } from "rnoh-masked-view" - - @Builder - function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnohContext, - tag: ctx.descriptor.tag, - buildCustomComponent: CustomComponentBuilder - }) - } -+ else if (ctx.descriptor.type === MASKED_VIEW_TYPE) { -+ MaskedView({ -+ ctx: ctx.rnohContext, -+ tag: ctx.descriptor.tag, -+ buildCustomComponent: CustomComponentBuilder -+ }) -+ } - ... - } - ... -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 - -## 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/masked-view Releases](https://github.com/react-native-oh-library/masked-view/releases) - -## 属性 - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------------- | ------------ | ------------------ | -------- | -------- | -------- | -| `maskElement` | 遮罩元素 | element | yes | All | yes | -| `androidRenderingMode` | 安卓渲染模式 | software, hardware | no | android | no | - -## 遗留问题 - -- [ ] 鸿蒙侧未实现遮罩效果[issue#1](https://github.com/react-native-oh-library/masked-view/issues/1) - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-native-masked-view/masked-view/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee