From 756f7f0faf4bc1d2f24e8611a09ebc8cc3887859 Mon Sep 17 00:00:00 2001 From: fzxlzy <810528574@qq.com> Date: Wed, 6 Dec 2023 18:52:44 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I8M9QH]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-image-picker=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-image-picker.md | 256 +++++++++++++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 zh-cn/react-native-image-picker.md diff --git a/zh-cn/react-native-image-picker.md b/zh-cn/react-native-image-picker.md new file mode 100644 index 00000000..f401639a --- /dev/null +++ b/zh-cn/react-native-image-picker.md @@ -0,0 +1,256 @@ +> 模板版本：v0.0.1 + +

+

react-native-image-picker

+

+

+ + Supported platforms + + + License + +

+ +## 安装与使用 + + + +#### **yarn** + +```bash +yarn add xxx +``` + +#### **npm** + +```bash +npm install xxx +``` + + + +下面的代码展示了这个库的基本使用场景： + +```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-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-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) + +## 属性 + +### 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 | + +### 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 | + +### 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 | yes | +| 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 | yes | +| id | local identifier of the photo or video. On Android, this is the same as fileName | string | no | iOS Android | yes | + +## 遗留问题 + +- 只实现了选择图库的接口属性，相机功能暂未适配 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-image-picker/react-native-image-picker/blob/main/LICENSE.md) ，请自由地享受和参与开源。 -- Gitee From e95502857dd8f1894d795d080f6462a855fa1092 Mon Sep 17 00:00:00 2001 From: fzxlzy <810528574@qq.com> Date: Wed, 6 Dec 2023 18:57:34 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I8M9QR]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-safe-area-context=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-safe-area-context.md | 268 ++++++++++++++++++++++++ 1 file changed, 268 insertions(+) create mode 100644 zh-cn/react-native-safe-area-context.md diff --git a/zh-cn/react-native-safe-area-context.md b/zh-cn/react-native-safe-area-context.md new file mode 100644 index 00000000..d3525e75 --- /dev/null +++ b/zh-cn/react-native-safe-area-context.md @@ -0,0 +1,268 @@ +> 模板版本：v0.0.1 + +

+

react-native-safe-area-context

+

+

+ + Supported platforms + + + License + +

+ +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **yarn** + +```bash +yarn add xxx +``` + +#### **npm** + +```bash +npm install xxx +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React from "react"; +import { Text, View } from "react-native"; +import { + SafeAreaProvider, + SafeAreaView, + initialWindowMetrics, +} from "react-native-safe-area-context"; + +const App = () => { + return ( + + + + hello + + + + ); +}; + +export default App; +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-safe-area": "file:../../node_modules/react-native-safe-area-context/harmony/safe_area.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-safe-area": "file:../../node_modules/react-native-safe-area-context/harmony/safe_area" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 SafeAreaViewPackage + +打开 `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-safe-area/src/main/cpp" ./safe_area) +# 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_safe_area) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "SafeAreaViewPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 react-native-safe-area-context 组件 + +打开 `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 { SAFE_AREA_TYPE, RNCSafeAreaView, SAFE_AREA_PROVIDER_TYPE, SafeAreaProvider } from "rnoh-safe-area" + +@Builder +function CustomComponentBuilder(ctx: ComponentBuilderContext) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ++ else if (ctx.componentName === SAFE_AREA_TYPE) { ++ RNCSafeAreaView({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } ++ else if (ctx.componentName === SAFE_AREA_PROVIDER_TYPE) { ++ SafeAreaProvider({ ++ ctx: ctx.rnohContext, ++ tag: ctx.descriptor.tag, ++ buildCustomComponent: CustomComponentBuilder ++ }) ++ } + ... +} +... +``` + +### 在 ArkTs 侧引入 SafeAreaViewPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +import type {RNPackageContext, RNPackage} from 'rnoh/ts'; +import {SamplePackage} from 'rnoh-sample-package/ts'; ++ import {SafeAreaViewPackage} from 'rnoh-safe-area/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SafeAreaViewPackage(ctx) + ]; +} +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) + +## 属性 + +**组件 SafeAreaProvider** + +You should add `SafeAreaProvider` in your app root component. You may need to add it in other places like the root of modals and routes when using react-native-screens. + +Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates. + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- | +| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | +| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop. | object | no | All | yes | + +**组件 SafeAreaView** + +`SafeAreaView` is a regular View component with the safe area insets applied as padding or margin. + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------- | ----------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- | +| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | +| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes | +| `mode` | Optional, padding (default) or margin. Apply the safe area to either the padding or the margin. | string | no | All | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/th3rdwave/react-native-safe-area-context/blob/main/LICENSE) ，请自由地享受和参与开源。 -- Gitee