diff --git a/en/react-native-barcode-builder.md b/en/react-native-barcode-builder.md index 401856f8cdb4da25630a9d46dda0b24dba6ce7fb..e1bbfc390ce3318af7123e55158f64fb7ceeb022 100644 --- a/en/react-native-barcode-builder.md +++ b/en/react-native-barcode-builder.md @@ -16,10 +16,16 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder/releases).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. +Please refer to the Releases page of the third-party library for corresponding version information: + +| Library Version | Release Information | Supported RN Version | +| :--- | :--- | :--- | +| 2.0.0 | [@react-native-oh-tpl/react-native-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-barcode-builder](https://gitcode.com/openharmony-sig/rntpc_react-native-barcode-builder) | 0.77 | Go to the project directory and execute the following instruction: +For older versions not published to npm, please refer to the [Installation Guide](/en/tgz-usage-en.md) to install the tgz package. @@ -27,13 +33,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-barcode-builder + +# 0.77 +npm install @react-native-ohos/react-native-barcode-builder ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-barcode-builder + +# 0.77 +yarn add @react-native-ohos/react-native-barcode-builder ``` @@ -76,17 +90,18 @@ export const BarcodeBuilderExample = () => { ## Link -The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. +The HarmonyOS implementation of this library depends on the native code from react-native-svg. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. -If it is not included, follow the guide provided in [@react-native-oh-tpl/react-native-svg docs](/en/react-native-svg-capi.md) to add it to your project. +If it is not included, follow the guide provided in [react-native-svg docs](/en/react-native-svg-capi.md) to add it to your project. ## Constraints ### 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. +This document is verified based on the following versions: +1. RNOH：0.72.86; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +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; -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder) ## Properties diff --git a/en/react-native-blurhash.md b/en/react-native-blurhash.md index cbf72732d2fc4da4874d9216e4b5351726961ae8..07adf191402858220045e2f1729bbf8a6d906c0f 100644 --- a/en/react-native-blurhash.md +++ b/en/react-native-blurhash.md @@ -19,7 +19,13 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library and download an applicable .tgz package: [@react-native-oh-tpl/react-native-blurhash Releases](https://github.com/react-native-oh-library/react-native-blurhash/releases). +Find the matching version information in the release address of a third-party library and download an applicable .tgz package: +| Library Version | Release Information | Supported RN Version | +| ----------- | ------------------------------------------------------------ | ---------- | +|2.0.3|[@react-native-oh-tpl/react-native-blurhash Releases](https://github.com/react-native-oh-library/react-native-blurhash/releases)|0.72| +|2.1.0|[@react-native-ohos/react-native-blurhash Releases]()|0.77| + +For older versions 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: @@ -30,13 +36,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-blurhash + +# 0.77 +npm install @react-native-ohos/react-native-blurhash ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-blurhash + +# 0.77 +yarn add @react-native-ohos/react-native-blurhash ``` @@ -282,6 +296,7 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -289,6 +304,14 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` +- 0.77 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-blurhash": "file:../../node_modules/@react-native-ohos/react-native-blurhash/harmony/blurhash.har" + } +``` + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -324,7 +347,12 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: 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-blurhash/src/main/cpp" ./blurhash) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-blurhash/src/main/cpp" ./blurhash) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -367,8 +395,12 @@ std::vector> PackageProvider::getPackages(Package::Cont Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff +// 0.72 + import {BlurhashPackage} from '@react-native-oh-tpl/react-native-blurhash/ts'; +// 0.77 ++ import {BlurhashPackage} from '@react-native-ohos/react-native-blurhash/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -395,9 +427,9 @@ 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. - -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-blurhash Releases](https://github.com/react-native-oh-library/react-native-blurhash/releases) +This document is verified based on the following versions: +1. RNOH：0.72.86; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +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; ## Properties @@ -418,7 +450,6 @@ Check the release version information in the release address of the third-party | `onLoadError?: (message?: string) => void` | A callback to call when the Blurhash failed to load. Use the `message` parameter to get the error message. | function | no | All | yes | | All `View` props | All properties from the React Native `View`. Use `style.width` and `style.height` for display-sizes. Also, `style.borderRadius` is natively supported on iOS. | ViewProps | no | All | yes | - ## API > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. diff --git a/en/react-native-bouncy-checkbox.md b/en/react-native-bouncy-checkbox.md index 3cc70fcf09ff6deba8b57e92571a10c35f5f27b3..afd13561b5f7eaffb457cea41fc6d97b9f2aed0a 100644 --- a/en/react-native-bouncy-checkbox.md +++ b/en/react-native-bouncy-checkbox.md @@ -16,6 +16,11 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| :--- | :--- | +| 4.0.1 | 0.72 | +| 4.1.2 | 0.77 | + > [!TIP] This repository depends on the following libraries, please refer to the corresponding documentation: | Dependencies | Version | @@ -27,13 +32,19 @@ This repository depends on the following libraries[@freakycoder/react-native-bou #### **npm** ```bash +#0.72 npm install --save react-native-bouncy-checkbox@4.0.1 +#0.77 +npm install --save react-native-bouncy-checkbox@4.1.2 ``` #### **yarn** ```bash -yarn install --save react-native-bouncy-checkbox@4.0.1 +#0.72 +yarn add react-native-bouncy-checkbox@4.0.1 +#0.77 +yarn add react-native-bouncy-checkbox@4.1.2 ``` The following code shows the basic use scenario of the repository: @@ -102,6 +113,7 @@ const styles = StyleSheet.create({ This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.404; ROM：5.0.0.31; +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; ## Properties (If Any) @@ -118,6 +130,7 @@ This document is verified based on the following versions: | text | set the checkbox's text | string | no | All | yes | | textComponent | set the checkbox's text by a React Component | component | no | All | yes | | disableText | if you want to use checkbox without text, you can enable it | boolean | no | All | yes | +| useBuiltInState4.1.2+ | To fully control the checkbox itself outside with your own state, just set to `false` and send your state value to `isChecked` prop. | boolean | no | All | yes | | size | size of `width` and `height` of the checkbox | number | no | All | yes | | style | set/override the container style | style | no | All | yes | | textStyle | set/override the text style | style | no | All | yes | diff --git a/en/react-native-check-box.md b/en/react-native-check-box.md index 8d1a51893f27e32a6c3c93ca8df055c1e334de7b..906060772b0d78b50bec48565e3f64d70c1fd72f 100644 --- a/en/react-native-check-box.md +++ b/en/react-native-check-box.md @@ -16,6 +16,10 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| :--- | :--- | +| 2.1.7 | 0.72/0.77 | + Go to the project directory and execute the following instruction: @@ -81,6 +85,7 @@ This document is verified based on the following versions: 1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400; ROM: 3.0.0.25; 2. RNOH: 0.72.33; SDK: OpenHarmony 5.0.0.71(API Version 12 Release); IDE: DevEco Studio 5.0.3.900; ROM: NEXT.0.0.71; +3. 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; ## Properties @@ -111,4 +116,4 @@ This document is verified based on the following versions: ## License -This project is licensed under [MIT License](https://github.com/crazycodeboy/react-native-check-box/blob/master/LICENSE). +This project is licensed under [MIT License](https://github.com/crazycodeboy/react-native-check-box/blob/master/LICENSE). \ No newline at end of file diff --git a/en/react-native-collapsible.md b/en/react-native-collapsible.md index 85e3b3041d00f64ccd8680c8578c36cba156c42f..fd06c919aab84d736f9a028108bb6666bd1f400b 100644 --- a/en/react-native-collapsible.md +++ b/en/react-native-collapsible.md @@ -17,6 +17,11 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| :--- | :--- | +| 1.6.1 | 0.72 | +| 1.6.2 | 0.77 | + Go to the project directory and execute the following instruction: @@ -24,13 +29,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install react-native-collapsible@1.6.1 + +# 0.77 +npm install react-native-collapsible@1.6.2 ``` #### **yarn** ```bash +# 0.72 yarn add react-native-collapsible@1.6.1 + +# 0.77 +yarn add react-native-collapsible@1.6.2 ``` @@ -91,6 +104,7 @@ This document is verified based on 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.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. 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; ## Properties diff --git a/en/react-native-community-hooks.md b/en/react-native-community-hooks.md index f6c3f88b45980f97c795585ee4eb08ddf6975ca6..f704f3ffb99e527b01dcd92169d3b19703462e93 100644 --- a/en/react-native-community-hooks.md +++ b/en/react-native-community-hooks.md @@ -16,6 +16,11 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| --------------- | -------------------- | +| 3.0.0 | 0.72 | +| 3.1.0 | 0.77 | + Go to the project directory and execute the following instruction: @@ -23,13 +28,21 @@ Go to the project directory and execute the following instruction: #### npm ```bash +# 0.72 npm install @react-native-community/hooks@3.0.0 + +# 0.77 +npm install @react-native-community/hooks@3.1.0 ``` #### yarn ```bash +# 0.72 yarn add @react-native-community/hooks@3.0.0 + +# 0.77 +yarn add @react-native-community/hooks@3.1.0 ``` @@ -130,6 +143,7 @@ This document is verified based on the following versions: 1.RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; 2.RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3.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; ## API @@ -150,15 +164,15 @@ This document is verified based on the following versions: | useLayout | Returns the x-axis and y-axis coordinates of an element and the width and height of the element. | Function | False | Android / iOS | Yes | | useRefresh | pull down to refresh. | Function | False | Android / iOS | Yes | -useAccessibilityInfo 方法返回值 +**Return value of `useAccessibilityInfo`** | Name | Description | Platform | HarmonyOS Support | |----------------|-------------------------------| -------- | ----------------- | | isBoldTextEnabled | whether bold text is enabled | iOS | Yes | | isScreenReaderEnabled | Whether the Screen Reading Function Is Enabled | Android / iOS | Yes | -| isGrayscaleEnabled | Whether grayscale mode is enabled | iOS | Yes | -| isInvertColorsEnabled | Whether color inversion is enabled | iOS | Yes | -| isReduceMotionEnabled | Whether reduction animation is enabled | Android / iOS | Yes | -| isReduceTransparencyEnabled | Whether reduce transparency is enabled | iOS | Yes | +| isGrayscaleEnabled | Whether grayscale mode is enabled | iOS | No | +| isInvertColorsEnabled | Whether color inversion is enabled | iOS | No | +| isReduceMotionEnabled | Whether reduction animation is enabled | Android / iOS | No | +| isReduceTransparencyEnabled | Whether reduce transparency is enabled | iOS | No | ## Known Issues @@ -166,4 +180,4 @@ useAccessibilityInfo 方法返回值 ## License -This project is licensed under [The ISC License (ISC)](https://github.com/react-native-community/hooks/blob/main/LICENSE). +This project is licensed under [The ISC License (ISC)](https://github.com/react-native-community/hooks/blob/main/LICENSE). \ No newline at end of file diff --git a/en/react-native-drop-shadow.md b/en/react-native-drop-shadow.md index 9c31dc21d1f31c4d698e911dac5f1f6f1e6c6d53..c1bba4a62b8dd6b51fa10ef6267d0a019f7cbfce 100644 --- a/en/react-native-drop-shadow.md +++ b/en/react-native-drop-shadow.md @@ -17,20 +17,36 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| --------------- | -------------------- | +| 1.0.0 | 0.72 | +| 1.0.3 | 0.77 | + +Navigate to the project directory and enter the following command: + #### **npm** ```bash +# 0.72 npm install react-native-drop-shadow@1.0.0 + +# 0.77 +npm install react-native-drop-shadow@1.0.3 ``` -#### **yarn** +#### **yarn** ```bash +# 0.72 yarn add react-native-drop-shadow@1.0.0 + +# 0.77 +yarn add react-native-drop-shadow@1.0.3 ``` + The following code shows the basic use scenario of the repository: @@ -129,6 +145,8 @@ react-native-harmony: 0.72.23; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco react-native-harmony: 0.72.33; SDK: Openharmony 5.0.0.71(API Version 12 Release); IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +react-native-harmony: 0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; + ## Properties > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. diff --git a/en/react-native-gifted-chat.md b/en/react-native-gifted-chat.md index c62cc00098042806bb2735e587ef74f2802b4c56..ffdc7347c66a00a896fb8d8ca601bc5e5ba12939 100644 --- a/en/react-native-gifted-chat.md +++ b/en/react-native-gifted-chat.md @@ -16,6 +16,11 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| :--- | :--- | +| 2.4.0 | 0.72 | +| 2.8.1 | 0.77 | + Go to the project directory and execute the following instruction: @@ -23,13 +28,19 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +#0.72 npm install react-native-gifted-chat@2.4.0 +#0.77 +npm install react-native-gifted-chat@2.8.1 ``` #### **yarn** ```bash +#0.72 yarn add react-native-gifted-chat@2.4.0 +#0.77 +yarn add react-native-gifted-chat@2.8.1 ``` @@ -89,13 +100,20 @@ export function App() { ) } ``` +Link +The HarmonyOS implementation (version 2.8.1) of this library depends on the code of `react-native-keyboard-controller`. If this library has already been integrated into your HarmonyOS project, there is no need to include it again. You can skip the steps in this section and proceed directly. + +If it has not been included, please refer to the [react-native-keyboard-controller docs](/en/react-native-keyboard-controller.md#link). + ## Constraints ### Compatibility This document is verified based on the following versions: -RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; +2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. 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; ## Properties @@ -105,10 +123,10 @@ RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.4 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------------------: | :----------------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: | -| **messageContainerRef** | *Ref to the flatlist* | *FlatList ref* | No | iOS/Android | Yes | -| **textInputRef** | Text field error text | *TextInput ref* | No | iOS/Android | Yes | +| **messageContainerRef** | Ref to the FlatList | *FlatList ref* | No | iOS/Android | Yes | +| **textInputRef** | Ref to the TextInput | *TextInput ref* | No | iOS/Android | Yes | | **messages** | Messages to display | *Array* | No | iOS/Android | Yes | -| **isTyping** | Typing Indicator state; If you use`renderFooter` it will override this | Boolean | No | iOS/Android | Yes | +| **isTyping** | Typing Indicator state; If you use `renderFooter` it will override this | Boolean | No | iOS/Android | Yes | | **text** | Input text | String | No | iOS/Android | Yes | | **placeholder** | Placeholder when `text` is empty; default is `'Type a message...'` | String | No | iOS/Android | Yes | | **messageIdGenerator** | Generate an id for new messages. Defaults to UUID v4 | *Function* | No | iOS/Android | Yes | @@ -117,16 +135,18 @@ RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.4 | **alwaysShowSend** | Always show send button in input text composer | Boolean | No | iOS/Android | Yes | | **locale** | Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`) | *String* | No | iOS/Android | Yes | | **timeFormat** | *(String)* - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format)) | *String* | No | iOS/Android | Yes | +| **dateFormatCalendar**2.8.1+ | Format to use for rendering relative times; Today - for now (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar)) | *String* | No | iOS/Android | Yes | | **dateFormat** | Format to use for rendering dates; default is `'ll'` (see [Day.js Format](https://day.js.org/docs/en/display/format)) | *String* | No | iOS/Android | Yes | | **loadEarlier** | Enables the "load earlier messages" button, required for `infiniteScroll` | Boolean | No | iOS/Android | Yes | | **isKeyboardInternallyHandled** | Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true` | Boolean | No | iOS/Android | Yes | +| **disableKeyboardController**2.8.1+ | Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false` | Boolean | No | iOS/Android | Yes | | **onLoadEarlier** | Callback when loading earlier messages | *Function* | No | iOS/Android | Yes | | **isLoadingEarlier** | Display an `ActivityIndicator` when loading earlier messages | Boolean | No | iOS/Android | Yes | | **renderLoading** | Render a loading view when initializing | *Function* | No | iOS/Android | Yes | | **renderLoadEarlier** | Custom "Load earlier messages" button | *Function* | No | iOS/Android | Yes | | **renderAvatar** | Custom message avatar; set to `null` to not render any avatar for the message | *Function* | No | iOS/Android | Yes | | **showUserAvatar** | Whether to render an avatar for the current user; default is `false`, only show avatars for other users | Boolean | No | iOS/Android | Yes | -| **showAvatarForEveryMessage** | avatars will only be displayed when a consecutive message is from the same user on the same day; | Boolean | No | iOS/Android | Yes | +| **showAvatarForEveryMessage** | avatars will only be displayed when a consecutive message is from the same user on the same day | Boolean | No | iOS/Android | Yes | | **onPressAvatar** | Callback when a message avatar is tapped | *Function* | No | iOS/Android | Yes | | **onLongPressAvatar** | Callback when a message avatar is long-pressed | *Function* | No | iOS/Android | Yes | | **renderAvatarOnTop** | Render the message avatar at the top of consecutive messages | Boolean | No | iOS/Android | Yes | @@ -136,20 +156,21 @@ RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.4 | **onPress** | Callback when a message bubble is pressed | Function | No | iOS/Android | Yes | | **onLongPress** | Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@{2017-09-25}/src/Bubble.js#L96-L119)) | Function | No | iOS/Android | Yes | | **inverted** | Reverses display order of `messages` | Boolean | No | iOS/Android | Yes | -| **renderUsernameOnMessage** | ndicate whether to show the user's username inside the message bubble | Boolean | No | iOS/Android | Yes | +| **renderUsernameOnMessage** | Indicate whether to show the user's username inside the message bubble | Boolean | No | iOS/Android | Yes | | **renderUsername** | Custom Username container | *Function* | No | iOS/Android | Yes | | **renderMessage** | Custom message container | *Function* | No | iOS/Android | Yes | | **renderMessageText** | Custom message text | *Function* | No | iOS/Android | Yes | | **renderMessageImage** | Custom message image | *Function* | No | iOS/Android | Yes | | **renderMessageVideo** | Custom message video | *Function* | No | iOS/Android | Yes | -| **imageProps** | Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage` | *Object* | No | iOS/Android | Yes | +| **imageProps** | Extra props to be passed to the `Image` component created by the default `renderMessageImage` | *Object* | No | iOS/Android | Yes | | **videoProps** | Extra props to be passed to the video component created by the required `renderMessageVideo` | *Object* | No | iOS/Android | Yes | +| **imageSourceProps**2.8.1+ | Extra props to be passed to the `MessageImage`'s | *Object* | No | iOS/Android | Yes | | **lightboxProps** | Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox) | *Object* | No | iOS/Android | Yes | | **isCustomViewBottom** | Determine whether renderCustomView is displayed before or after the text, image and video views | Boolean | No | iOS/Android | Yes | | **renderCustomView** | Custom view inside the bubble | *Function* | No | iOS/Android | Yes | | **renderDay** | Custom day above a message | *Function* | No | iOS/Android | Yes | | **renderTime** | Custom time inside a message | *Function* | No | iOS/Android | Yes | -| **renderFooter** | Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true | *Function* | No | iOS/Android | Yes | +| **renderFooter** | Custom footer component on the ListView, e.g. `'User is typing...'`; see [CustomizedFeaturesExample.tsx](https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example/components/chat-examples/CustomizedFeaturesExample.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true | *Function* | No | iOS/Android | Yes | | **renderChatEmpty** | Custom component to render in the ListView when messages are empty | *Function* | No | iOS/Android | Yes | | **renderChatFooter** | Custom component to render below the MessageContainer (separate from the ListView) | *Function* | No | iOS/Android | Yes | | **renderInputToolbar** | Custom message composer container | *Function* | No | iOS/Android | Yes | @@ -159,12 +180,13 @@ RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.4 | **renderAccessory** | Custom second line of actions below the message composer | *Function* | No | iOS/Android | Yes | | **onPressActionButton** | Callback when the Action button is pressed (if set, the default `actionSheet` will not be used) | *Function* | No | iOS/Android | Yes | | **bottomOffset** | Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar) | Number | No | iOS/Android | No | +| **focusOnInputWhenOpeningKeyboard**2.8.1+ | Focus on automatically when opening the keyboard; default true | Bool | No | iOS/Android | No | | **minInputToolbarHeight** | Minimum height of the input toolbar; default is `44` | Number | No | iOS/Android | No | -| **listViewProps** | Extra props to be passed to the messages [``](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details | *Object* | No | iOS/Android | Yes | -| **textInputProps** | Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/textinput.html) | *Object* | No | iOS/Android | Yes | -| **textInputStyle** | Custom style to be passed to the [``](https://facebook.github.io/react-native/docs/textinput.html) | *Object* | No | iOS/Android | Yes | -| **multiline** | Indicates whether to allow the [``](https://facebook.github.io/react-native/docs/textinput.html) to be multiple lines or not; | Boolean | No | iOS/Android | Yes | -| **keyboardShouldPersistTaps** | Determines whether the keyboard should stay visible after a tap; see [``](https://facebook.github.io/react-native/docs/scrollview.html) docs | String | No | iOS/Android | Yes | +| **listViewProps** | Extra props to be passed to the messages `ListView`; some props can't be overridden, see the code in `MessageContainer.render()` for details | *Object* | No | iOS/Android | Yes | +| **textInputProps** | Extra props to be passed to the `TextInput` | *Object* | No | iOS/Android | Yes | +| **textInputStyle** | Custom style to be passed to the `TextInput` | *Object* | No | iOS/Android | Yes | +| **multiline** | Indicates whether to allow the `TextInput` to be multiple lines or not | Boolean | No | iOS/Android | Yes | +| **keyboardShouldPersistTaps** | Determines whether the keyboard should stay visible after a tap; see `ScrollView` docs | String | No | iOS/Android | Yes | | **onInputTextChanged** | Callback when the input text changes | *Function* | No | iOS/Android | Yes | | **maxInputLength** | Max message composer TextInput length | *Number* | No | iOS/Android | Yes | | **parsePatterns** | Custom parse patterns for [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text) used to linking message content (like URLs and phone numbers), e.g.: | *Function* | No | iOS/Android | Yes | @@ -179,9 +201,12 @@ RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.4 | **onQuickReply** | Callback when sending a quick reply (to backend server) | *Function* | No | iOS/Android | Yes | | **renderQuickReplies** | Custom all quick reply view | *Function* | No | iOS/Android | Yes | | **quickReplyStyle** | Custom quick reply view style | *Object* | No | iOS/Android | Yes | +| **quickReplyContainerStyle**2.8.1+ | Custom quick reply container view style | *Object* | No | iOS/Android | Yes | | **renderQuickReplySend** | Custom quick reply send view | *Function* | No | iOS/Android | Yes | | **shouldUpdateMessage** | Lets the message component know when to update outside of normal cases. | *Function* | No | iOS/Android | Yes | | **infiniteScroll** | infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too. | *Boolean* | No | iOS/Android | Yes | +| **isStatusBarTranslucentAndroid**2.8.1+ | If you use translucent status bar on Android, set this option to true. Ignored on iOS. | *Boolean* | No | iOS/Android | Yes | + ## Known Issues diff --git a/en/react-native-picker-picker(nocodegen).md b/en/react-native-picker-picker(nocodegen).md index 81b267e6a2c977e85e9a27fe07b7b0334657c7b9..f220aadfb15afaa63542a583382a0b3e35043f31 100644 --- a/en/react-native-picker-picker(nocodegen).md +++ b/en/react-native-picker-picker(nocodegen).md @@ -274,7 +274,7 @@ Check the release version information in the release address of the third-party |----------------------|----------------------------------------------------------------------------------------------------------|---------------|----------|----------|-------------------| | `label` | Displayed value on the Picker Item. | string | Yes | All | Yes | | `value` | Actual value on the Picker Item. | number,string | Yes | All | Yes | -| `color` | Displayed color on the Picker Item. | ColorValue | Yes | All | No | +| `color` | Displayed color on the Picker Item. | ColorValue | No | All | No | | `fontFamily` | Displayed fontFamily on the Picker Item. | string | No | All | No | | `style` | Style to apply to individual item labels. | ViewStyleProp | No | Android | No | | `enabled` | If set to false, the specific item will be disabled, i.e. the user will not be able to make a selection. | boolean | No | Android | No | @@ -302,4 +302,4 @@ Check the release version information in the release address of the third-party ## License -This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/picker/blob/sig/LICENSE). +This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/picker/blob/sig/LICENSE). \ No newline at end of file diff --git a/en/react-native-picker-picker.md b/en/react-native-picker-picker.md index 954f5aa40d0be5686be55291f1bb9e87f4c91c3b..2eccbf350ee733d068225075430fb46fdb6e4c29 100644 --- a/en/react-native-picker-picker.md +++ b/en/react-native-picker-picker.md @@ -19,21 +19,35 @@ Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases).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: +| Library Version | Release Info | Supported RN Version | +| :--- | :--- | :--- | +| 2.6.1 | [@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases) | 0.72 | +| 2.11.1 | [@react-native-ohos/picker Releases]() | 0.77 | +For older versions not published to npm, please refer to the [Installation Guide](/zh-cn/tgz-usage.md) to install the tgz package. +Navigate to your project directory and enter the following commands: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/picker + +# 0.77 +npm install @react-native-ohos/picker ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/picker + +# 0.77 +yarn add @react-native-ohos/picker ``` @@ -44,7 +58,7 @@ The following code shows the basic use scenario of the repository: ```js import * as React from "react"; -import { Picker } from "@react-native-oh-tpl/picker"; +import { Picker } from "@react-native-picker/picker"; import { View } from "react-native"; export const PickerExample = ()=>{ @@ -94,6 +108,8 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -102,10 +118,18 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` -Click the `sync` button in the upper right corner. +- 0.77 -Alternatively, run the following instruction on the terminal: +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/picker": "file:../../node_modules/@react-native-ohos/picker/harmony/picker.har", + } +``` +Click the `sync` button in the top-right corner. + +Or, run the following in your terminal: ```bash cd entry ohpm install @@ -140,7 +164,12 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +# 0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/picker/src/main/cpp" ./picker) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/picker/src/main/cpp" ./picker) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -185,8 +214,12 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src ```diff ... +// 0.72 + import { RNCPicker, PICKER_TYPE } from "@react-native-oh-tpl/picker" +// 0.77 ++ import { RNCPicker, PICKER_TYPE } from "@react-native-ohos/picker" + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -220,8 +253,12 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff ... +// 0.72 + import { RNCPickerPackage } from '@react-native-oh-tpl/picker/ts'; +// 0.77 ++ import { RNCPickerPackage } from '@react-native-ohos/picker/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -247,9 +284,9 @@ 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. - -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases) +This document is verified based on the following versions: +1. RNOH：0.72.86; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +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; ## Properties @@ -283,7 +320,7 @@ Check the release version information in the release address of the third-party |----------------------|----------------------------------------------------------------------------------------------------------|---------------|----------|----------|-------------------| | `label` | Displayed value on the Picker Item. | string | Yes | All | Yes | | `value` | Actual value on the Pickmodeler Item. | number,string | Yes | All | Yes | -| `color` | Displayed color on the Picker Item. | ColorValue | Yes | All | No | +| `color` | Displayed color on the Picker Item. | ColorValue | No | All | No | | `fontFamily` | Displayed fontFamily on the Picker Item. | string | No | All | No | | `style` | Style to apply to individual item labels. | ViewStyleProp | No | Android | No | | `enabled` | If set to false, the specific item will be disabled, i.e. the user will not be able to make a selection. | boolean | No | Android | No | @@ -291,9 +328,6 @@ Check the release version information in the release address of the third-party ## Static Methods -> [!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 | |---------|---------------------------------|----------|----------|----------|-------------------| @@ -311,4 +345,4 @@ Check the release version information in the release address of the third-party ## License -This project is licensed under [The MIT License (MIT)](https://github.com/react-native-picker/picker/blob/master/LICENSE). +This project is licensed under [The MIT License (MIT)](https://github.com/react-native-picker/picker/blob/master/LICENSE). \ No newline at end of file diff --git a/en/react-native-qr-decode-image-camera.md b/en/react-native-qr-decode-image-camera.md index f9af7f4729b2a62f6c07bb4bc15b57db3d42647c..864cbfe4d7de9ccc6b9e35d87ef60f650514afcc 100644 --- a/en/react-native-qr-decode-image-camera.md +++ b/en/react-native-qr-decode-image-camera.md @@ -17,7 +17,14 @@ ## Installation and Usage -Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-qr-decode-image-camera Releases](https://github.com/react-native-oh-library/react-native-qr-decode-image-camera/releases).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. +Please refer to the Releases page of the third-party library for corresponding version information: + +| Library Version | Release Information | Supported RN Version | +| :--- | :--- | :--- | +| 1.1.3 | [@react-native-oh-tpl/react-native-qr-decode-image-camera Releases](https://github.com/react-native-oh-library/react-native-qr-decode-image-camera/releases) | 0.72 | +| 1.2.0 | [@react-native-ohos/react-native-qr-decode-image-camera Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-qr-decode-image-camera) | 0.77 | + +For older versions 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: @@ -27,13 +34,19 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-qr-decode-image-camera +# 0.77 +npm install @react-native-ohos/react-native-qr-decode-image-camera ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-qr-decode-image-camera +# 0.77 +yarn add @react-native-ohos/react-native-qr-decode-image-camera ``` @@ -145,9 +158,9 @@ If this repository has been adapted to `Codegen`, generate the bridge code of th ## Link -The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-vision-camera. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. +The HarmonyOS implementation of this library depends on the native code of `react-native-vision-camera`. If this library has already been integrated into your HarmonyOS project, there is no need to include it again. You can skip the steps in this section and proceed directly. -If it is not included, follow the guide provided in @react-native-oh-tpl/react-native-vision-camera to add it to your project. +If it has not been included, please refer to [react-native-vision-camera docs](/en/react-native-vision-camera.md) for integration. ## 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project @@ -172,6 +185,7 @@ Method 1 (recommended): Use the HAR file. Open `entry/oh-package.json5` file and add the following dependencies: +- 0.72 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -179,6 +193,15 @@ Open `entry/oh-package.json5` file and add the following dependencies: } ``` +- 0.77 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-qr-decode-image-camera": "file:../../node_modules/@react-native-ohos/react-native-qr-decode-image-camera/harmony/qr_decode_image_camera.har" + } +``` + + Click the `sync` button in the upper right corner. Alternatively, run the following instruction on the terminal: @@ -199,7 +222,11 @@ Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following co ```diff ... + // 0.72 + import {RNQrDecodeImageCameraPackage} from '@react-native-oh-tpl/react-native-qr-decode-image-camera/ts'; + // 0.77 ++ import {RNQrDecodeImageCameraPackage} from '@react-native-ohos/react-native-qr-decode-image-camera/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -215,7 +242,11 @@ Find `function buildCustomRNComponent()`, which is usually located in `entry/src ```diff ... + // 0.72 + import { NativeScan } from "@react-native-oh-tpl/react-native-qr-decode-image-camera" + // 0.77 ++ import { NativeScan } from "@react-native-ohos/react-native-qr-decode-image-camera" + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { @@ -231,11 +262,72 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... ``` -### 5. Running +### 5. Configure CMakeLists and import QrDecodeImageCameraPackage +> [!TIP] Required for 0.77 -Click the `sync` button in the upper right corner. +Open `entry/src/main/cpp/CMakeLists.txt` and add the following: -Alternatively, run the following instruction on the terminal: +```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-qr-decode-image-camera/src/main/cpp" ./qr-decode-image-camera) + +# 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_qr_decode_image_camera) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "QrDecodeImageCameraPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 6. Run + +Click the `sync` button in the top right corner + +Or run the following command in the terminal: ```bash cd entry @@ -248,9 +340,9 @@ 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. - -Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-qr-decode-image-camera](https://github.com/react-native-oh-library/react-native-qr-decode-image-camera/releases) +This document is verified based on the following versions: +1. RNOH：0.72.86; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +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; ## Static Methods diff --git a/en/react-native-ratings.md b/en/react-native-ratings.md index 7bc5f7d54f7c069564862efca6bc72006227d486..606c85bba09e766e57bfa64decf58eec29449339 100644 --- a/en/react-native-ratings.md +++ b/en/react-native-ratings.md @@ -17,6 +17,10 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| :--- | :--- | +| 8.1.0 | 0.72/0.77 | + #### **npm** @@ -126,6 +130,7 @@ This document is verified based on 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.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. 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; ## Properties @@ -137,7 +142,7 @@ This document is verified based on the following versions: | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | | **type** | Choose one of the built-in types: star, rocket, bell, heart or use type custom to render a custom image (optional) | String | No | iOS/Android | Yes | -| **ratingImage** | Pass in a custom image source; use this along with type='custom' prop above (optional) | String | YES | iOS/Android | Yes | +| **ratingImage** | Pass in a custom image source; use this along with type='custom' prop above (optional) | String | No | iOS/Android | Yes | | **ratingColor** | Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above (optional) | String | No | iOS/Android | Yes | | **ratingBackgroundColor** | Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above (optional) | String | No | iOS/Android | Yes | | **tintColor** | Color used to change the background of the rating icon (optional) | String | No | iOS/Android | Yes | @@ -153,7 +158,7 @@ This document is verified based on the following versions: | **jumpValue** | The value to jump when rating value changes (if jumpValue === 0.5, rating value increases/decreases like 0, 0.5, 1.0, 1.5 ...). Default is 0 (not to jump) | number | No | iOS/Android | Yes | | **onStartRating** | Callback method when the user starts rating. Gives you the start rating value as a whole number | function | No | iOS/Android | Yes | | **onSwipeRating** | Callback method when the user is swiping. Gives you the current rating value as a whole number | function | No | iOS/Android | Yes | -| **onFinishRating** | Callback method when the user finishes rating. Gives you the final rating value as a whole number (required) | function | No | iOS/Android | Yes | +| **onFinishRating** | Callback method when the user finishes rating. Gives you the final rating value as a whole number (required) | function | Yes | iOS/Android | Yes | ## **API（AirbnbRating）** > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. diff --git a/en/react-native-shadow-2.md b/en/react-native-shadow-2.md index 01547879aac9d61738822a285726e680161ddaee..2ab8a2f0dae46f0f35635ae22798053b5a4801bf 100644 --- a/en/react-native-shadow-2.md +++ b/en/react-native-shadow-2.md @@ -17,6 +17,11 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| :--- | :--- | +| 7.0.8 | 0.72 | +| 7.1.1 | 0.77 | + Go to the project directory and execute the following instruction: @@ -24,13 +29,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install react-native-shadow-2@7.0.8 + +# 0.77 +npm install react-native-shadow-2@7.1.1 ``` #### **yarn** ```bash +# 0.72 yarn add react-native-shadow-2@7.0.8 + +# 0.77 +yarn add react-native-shadow-2@7.1.1 ``` @@ -173,9 +186,9 @@ const styles = StyleSheet.create({ ## Link -The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-svg. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly. +The HarmonyOS implementation of this library depends on the native code of `react-native-svg`. If this library has already been integrated into your HarmonyOS project, there is no need to include it again. You can skip the steps in this section and proceed directly. -If it is not included, follow the guide provided in @react-native-oh-tpl/react-native-svg to add it to your project. +If it has not been included, please refer to the [react-native-svg docs](/en/react-native-svg-capi.md#link) for integration instructions. ## Constraints @@ -184,6 +197,7 @@ If it is not included, follow the guide provided in @react-native-oh-tpl/react-n This document is verified based on the following versions: 1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25 (API Version 12 Canary4); IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; +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; ## Properties @@ -216,4 +230,4 @@ The currently available properties are specifically listed above. ## License -This project is licensed under [The MIT License (MIT)](https://github.com/SrBrahma/react-native-shadow-2/blob/main/LICENSE). +This project is licensed under [The MIT License (MIT)](https://github.com/SrBrahma/react-native-shadow-2/blob/main/LICENSE). \ No newline at end of file diff --git a/en/react-native-vector-icons.md b/en/react-native-vector-icons.md index a433d940384ce4cbff49ab9faa208b96e1b1f515..7d88d0badce9629a890acee7d2a53de3da0ac1d1 100644 --- a/en/react-native-vector-icons.md +++ b/en/react-native-vector-icons.md @@ -17,6 +17,11 @@ ## Installation and Usage +| Library Version | Supported RN Version | +| :--- | :--- | +| 10.0.3 | 0.72 | +| 10.2.0 | 0.77 | + Go to the project directory and execute the following instruction: @@ -24,13 +29,21 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install react-native-vector-icons@10.0.3 + +# 0.77 +npm install react-native-vector-icons@10.2.0 ``` #### **yarn** ```bash +# 0.72 yarn add react-native-vector-icons@10.0.3 + +# 0.77 +yarn add react-native-vector-icons@10.2.0 ``` @@ -357,6 +370,7 @@ If their versions are earlier than API version 11, the font registration fails a This document is verified based on the following versions: 1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; 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; ## Known Issues @@ -366,4 +380,4 @@ This document is verified based on the following versions: ## License -This project is licensed under [The MIT License (MIT)](https://github.com/oblador/react-native-vector-icons/blob/master/LICENSE). +This project is licensed under [The MIT License (MIT)](https://github.com/oblador/react-native-vector-icons/blob/master/LICENSE). \ No newline at end of file diff --git a/zh-cn/react-native-barcode-builder.md b/zh-cn/react-native-barcode-builder.md index 2a92dd46d9360cb91f84594f6b4725942dcb5d64..b0431508dcbf7b5ef3013c29c786ee2f106fb278 100644 --- a/zh-cn/react-native-barcode-builder.md +++ b/zh-cn/react-native-barcode-builder.md @@ -16,7 +16,14 @@ ## 安装与使用 -1、请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN0.77 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.0.0 | [@react-native-oh-tpl/react-native-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder/releases) | 0.72 | +| 2.1.0 | [@react-native-ohos/react-native-barcode-builder](https://gitcode.com/openharmony-sig/rntpc_react-native-barcode-builder) | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-barcode-builder + +# 0.77 +npm install @react-native-ohos/react-native-barcode-builder ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-barcode-builder + +# 0.77 +yarn add @react-native-ohos/react-native-barcode-builder ``` @@ -74,17 +89,18 @@ export const BarcodeBuilderExample = () => { ## Link -本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库鸿蒙侧实现依赖 react-native-svg 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](/zh-cn/react-native-svg-capi.md)进行引入 +如未引入请参照[react-native-svg 文档](/zh-cn/react-native-svg-capi.md)进行引入 ## 约束与限制 ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +本文档内容基于以下版本验证通过： -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-barcode-builder](https://github.com/react-native-oh-library/react-native-barcode-builder) +1. RNOH：0.72.86; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +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; ## 属性 @@ -96,18 +112,18 @@ export const BarcodeBuilderExample = () => { 该库为 UI 组件库，通过配置属性标签，实现对应的功能。 -| Name | Type | Description | Required | Platform | HarmonyOS Support | -| ---------- | -------- | ------------------------------------------------------------------------------------------------ | -------- | ----------- | ----------------- | -| value | string | What the barcode stands for. | yes | iOS/Android | yes | -| format | string | Which barcode type to use. [learn more](https://github.com/lindell/JsBarcode#supported-barcodes) | no | iOS/Android | yes | -| width | number | Width of a single bar. | no | iOS/Android | yes | -| height | number | Height of the barcode. | no | iOS/Android | yes | -| text | string | Override text that is displayed. | no | iOS/Android | yes | -| lineColor | string | Color of the bars. | no | iOS/Android | yes | -| textColor | string | Color of the text. | no | iOS/Android | yes | -| background | string | Background color of the barcode. | no | iOS/Android | yes | -| onError | function | Handler for invalid barcode of selected format. | no | iOS/Android | yes | +| Name | Type | Description | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| value | string | 条形码所代表的值。 | yes | iOS/Android | yes | +| format | string | 使用哪种条形码类型。[了解更多](https://github.com/lindell/JsBarcode#supported-barcodes) | no | iOS/Android | yes | +| width | number | 单个条的宽度。 | no | iOS/Android | yes | +| height | number | 条形码的高度。 | no | iOS/Android | yes | +| text | string | 覆盖显示的文本。 | no | iOS/Android | yes | +| lineColor | string | 条纹的颜色。 | no | iOS/Android | yes | +| textColor | string | 文本的颜色。 | no | iOS/Android | yes | +| background | string | 条形码的背景颜色。 | no | iOS/Android | yes | +| onError | function | 当所选格式的条形码无效时的回调函数。 | no | iOS/Android | yes | ## 开源协议 -本项目基于 [The Apache License (Apache)](https://github.com/wonsikin/react-native-barcode-builder/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The Apache License (Apache)](https://github.com/wonsikin/react-native-barcode-builder/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-blurhash.md b/zh-cn/react-native-blurhash.md index 80ac1ef43282b1f7eab3f8db8d3414dca9f6a9b8..18b266154ecc568658fd760fd98f8fee6570365d 100644 --- a/zh-cn/react-native-blurhash.md +++ b/zh-cn/react-native-blurhash.md @@ -19,7 +19,13 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-blurhash Releases](https://github.com/react-native-oh-library/react-native-blurhash/releases)。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ----------- | ------------------------------------------------------------ | ---------- | +|2.0.3|[@react-native-oh-tpl/react-native-blurhash Releases](https://github.com/react-native-oh-library/react-native-blurhash/releases)|0.72| +|2.1.0|[@react-native-ohos/react-native-blurhash Releases]()|0.77| + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -30,13 +36,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-blurhash + +# 0.77 +npm install @react-native-ohos/react-native-blurhash ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-blurhash + +# 0.77 +yarn add @react-native-ohos/react-native-blurhash ``` @@ -282,7 +296,7 @@ export default BlurhashDemo > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 打开 `entry/oh-package.json5`，添加以下依赖 - +- 0.72 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -290,6 +304,14 @@ export default BlurhashDemo } ``` +- 0.77 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-blurhash": "file:../../node_modules/@react-native-ohos/react-native-blurhash/harmony/blurhash.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -325,7 +347,12 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: 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-blurhash/src/main/cpp" ./blurhash) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-blurhash/src/main/cpp" ./blurhash) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -368,8 +395,12 @@ std::vector> PackageProvider::getPackages(Package::Cont 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff +// 0.72 + import {BlurhashPackage} from '@react-native-oh-tpl/react-native-blurhash/ts'; +// 0.77 ++ import {BlurhashPackage} from '@react-native-ohos/react-native-blurhash/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -396,9 +427,9 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-blurhash Releases](https://github.com/react-native-oh-library/react-native-blurhash/releases) +本文档内容基于以下版本验证通过： +1. RNOH：0.72.86; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +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; ## 属性 @@ -406,19 +437,18 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------------------------ | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | -| `blurhash` | The blurhash string to use. Example: `LGFFaXYk^6#M@-5c,1J5@[or[Q6.` | string | yes | All | yes | -| `decodeWidth?` | The width (resolution) to decode to. Higher values decrease performance, use `16` for large lists, otherwise you can increase it to `32`. | number | no | All | yes | -| `decodeHeight?` | The height (resolution) to decode to. Higher values decrease performance, use `16` for large lists, otherwise you can increase it to `32`. | number | no | All | yes | -| `decodePunch?` | Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders. | number | no | All | yes | -| `decodeAsync?` | Asynchronously decode the Blurhash on a background Thread instead of the UI-Thread. | boolean | no | All | yes | -| `resizeMode?` | Sets the resize mode of the image. (no, `'repeat'` is not supported.) | enum | no | All | yes | -| `onLoadStart?: () => void` | A callback to call when the Blurhash started to decode the given `blurhash` string. | function | no | All | yes | -| `onLoadEnd?: () => void` | A callback to call when the Blurhash successfully decoded the given `blurhash` string and rendered the image to the `` view. | function | no | All | yes | -| `onLoadError?: (message?: string) => void` | A callback to call when the Blurhash failed to load. Use the `message` parameter to get the error message. | function | no | All | yes | -| All `View` props | All properties from the React Native `View`. Use `style.width` and `style.height` for display-sizes. Also, `style.borderRadius` is natively supported on iOS. | ViewProps | no | All | yes | - +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `blurhash` | 要使用的 blurhash 字符串。例如：`LGFFaXYk^6#M@-5c,1J5@[or[Q6.` | string | yes | All | yes | +| `decodeWidth?` | 解码的目标宽度（分辨率）。值越高会降低性能，对于长列表建议使用 `16`，否则可以增加到 `32`。 | number | no | All | yes | +| `decodeHeight?` | 解码的目标高度（分辨率）。值越高会降低性能，对于长列表建议使用 `16`，否则可以增加到 `32`。 | number | no | All | yes | +| `decodePunch?` | 调整输出图像的对比度。如果你想要占位符呈现不同的外观，可以微调此参数。 | number | no | All | yes | +| `decodeAsync?` | 在后台线程而不是 UI 线程上异步解码 Blurhash。 | boolean | no | All | yes | +| `resizeMode?` | 设置图像的调整模式。（注：不支持 `'repeat'`。） | enum | no | All | yes | +| `onLoadStart?: () => void` | 当 Blurhash 开始解码给定的 `blurhash` 字符串时调用的回调函数。 | function | no | All | yes | +| `onLoadEnd?: () => void` | 当 Blurhash 成功解码给定的 `blurhash` 字符串并将图像渲染到 `` 视图时调用的回调函数。 | function | no | All | yes | +| `onLoadError?: (message?: string) => void` | 当 Blurhash 加载失败时调用的回调函数。使用 `message` 参数获取错误信息。 | function | no | All | yes | +| All `View` props | 来自 React Native `View` 的所有属性。使用 `style.width` 和 `style.height` 来设置显示尺寸。此外，iOS 原生支持 `style.borderRadius`。 | ViewProps | no | All | yes | ## API @@ -426,12 +456,12 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| encode() | Encodes the given image URI to a blurhash string | (imageUri: string, componentsX: number, componentsY: number)=> Promise\; | no | All | yes | -| clearCosineCache() | Clears the cosine cache and frees up memory. | ()=> void | no | All | yes | -| getAverageColor() | Gets the average color in a given blurhash string. | (blurhash: string)=> RGB \|undefined; | no | All | yes | -| isBlurhashValid() | Verifies if the given blurhash is valid by checking it's type, length and size flag. | (blurhash: string)=> ReturnType\; | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| encode() | 将给定的图片 URI 编码为 blurhash 字符串。 | (imageUri: string, componentsX: number, componentsY: number)=> Promise\; | no | All | yes | +| clearCosineCache() | 清除余弦缓存并释放内存。 | ()=> void | no | All | yes | +| getAverageColor() | 获取给定 blurhash 字符串中的平均颜色。 | (blurhash: string)=> RGB \|undefined; | no | All | yes | +| isBlurhashValid() | 通过检查类型、长度和尺寸标志来验证给定的 blurhash 是否有效。 | (blurhash: string)=> ReturnType\; | no | All | yes | ## 遗留问题 diff --git a/zh-cn/react-native-bouncy-checkbox.md b/zh-cn/react-native-bouncy-checkbox.md index 688ddac3752679c5527f8031bd421aacdbf43ed9..d27cd0ebb1b7402dc542c45179aac2ace7dcb444 100644 --- a/zh-cn/react-native-bouncy-checkbox.md +++ b/zh-cn/react-native-bouncy-checkbox.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| :--- | :--- | +| 4.0.1 | 0.72 | +| 4.1.2 | 0.77 | + > [!TIP] 需要配套的服务和三方依赖 | Dependencies | Version | @@ -27,13 +32,19 @@ #### **npm** ```bash +#0.72 npm install --save react-native-bouncy-checkbox@4.0.1 +#0.77 +npm install --save react-native-bouncy-checkbox@4.1.2 ``` #### **yarn** ```bash -yarn install --save react-native-bouncy-checkbox@4.0.1 +#0.72 +yarn add react-native-bouncy-checkbox@4.0.1 +#0.77 +yarn add react-native-bouncy-checkbox@4.1.2 ``` 下面的代码展示了这个库的基本使用场景： @@ -101,6 +112,7 @@ const styles = StyleSheet.create({ 本文档内容基于以下版本验证： 1. RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.404; ROM：5.0.0.31; +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; ## 属性 @@ -109,32 +121,33 @@ const styles = StyleSheet.create({ > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------------- | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | -| isChecked | if you want to control check state yourself, you can use `isChecked` prop now! | boolean | no | All | yes | -| onPress | set your own onPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false | function | no | All | yes | -| onLongPress | set your own onLongPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false | function | no | All | yes | -| text | set the checkbox's text | string | no | All | yes | -| textComponent | set the checkbox's text by a React Component | component | no | All | yes | -| disableText | if you want to use checkbox without text, you can enable it | boolean | no | All | yes | -| size | size of `width` and `height` of the checkbox | number | no | All | yes | -| style | set/override the container style | style | no | All | yes | -| textStyle | set/override the text style | style | no | All | yes | -| iconStyle | set/override the outer icon container style | style | no | All | yes | -| innerIconStyle | set/override the inner icon container style | style | no | All | yes | -| fillColor | change the checkbox's filled color | color | no | All | yes | -| unfillColor | change the checkbox's un-filled color when it's not checked | color | no | All | yes | -| iconComponent | set your own icon component | component | no | All | yes | -| checkIconImageSource | set your own check icon image | image | no | All | yes | -| textContainerStyle | set/override the text container style | ViewStyle | no | All | yes | -| ImageComponent | set your own Image component instead of RN's default Image | component | no | All | yes | -| TouchableComponent | set/override the main TouchableOpacity component with any Touchable Component like Pressable | component | no | All | yes | -| bounceEffectIn | change the bounce effect when press in | number | no | All | yes | -| bounceEffectOut | change the bounce effect when press out | number | no | All | yes | -| bounceVelocityIn | change the bounce velocity when press in | number | no | All | yes | -| bounceVelocityOut | change the bounce velocity when press out | number | no | All | yes | -| bouncinessIn | change the bounciness when press in | number | no | All | yes | -| bouncinessOut | change the bounciness when press out | number | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| isChecked | 如果你想自行控制选中状态，现在可以使用 `isChecked` 属性！ | boolean | no | All | yes | +| onPress | 设置弹跳效果后的自定义点击功能，如果 disableBuiltInState 为 false，回调会接收下一个 `isChecked` 布尔值。 | function | no | All | yes | +| onLongPress | 设置弹跳效果后的自定义长按功能，如果 disableBuiltInState 为 false，回调会接收下一个 `isChecked` 布尔值。 | function | no | All | yes | +| text | 设置复选框的文本。 | string | no | All | yes | +| textComponent | 通过 React 组件设置复选框的文本。 | component | no | All | yes | +| disableText | 如果你想使用不带文本的复选框，可以启用此项。 | boolean | no | All | yes | +| useBuiltInState4.1.2+ | 若要完全在外部使用自己的状态控制复选框，只需将其设置为 `false` 并将你的状态值传递给 `isChecked` 属性。 | boolean | no | All | yes | +| size | 复选框 `width`（宽）和 `height`（高）的大小。 | number | no | All | yes | +| style | 设置/覆盖容器样式。 | style | no | All | yes | +| textStyle | 设置/覆盖文本样式。 | style | no | All | yes | +| iconStyle | 设置/覆盖外部图标容器样式。 | style | no | All | yes | +| innerIconStyle | 设置/覆盖内部图标容器样式。 | style | no | All | yes | +| fillColor | 更改复选框的填充颜色。 | color | no | All | yes | +| unfillColor | 更改复选框未被选中时的未填充颜色。 | color | no | All | yes | +| iconComponent | 设置你自己的图标组件。 | component | no | All | yes | +| checkIconImageSource | 设置你自己的选中图标图片。 | image | no | All | yes | +| textContainerStyle | 设置/覆盖文本容器样式。 | ViewStyle | no | All | yes | +| ImageComponent | 设置你自己的 Image 组件来代替 RN 的默认 Image 组件。 | component | no | All | yes | +| TouchableComponent | 使用任何 Touchable 组件（如 Pressable）设置/覆盖主 TouchableOpacity 组件。 | component | no | All | yes | +| bounceEffectIn | 更改按下时的弹跳效果。 | number | no | All | yes | +| bounceEffectOut | 更改松开时的弹跳效果。 | number | no | All | yes | +| bounceVelocityIn | 更改按下时的弹跳速度。 | number | no | All | yes | +| bounceVelocityOut | 更改松开时的弹跳速度。 | number | no | All | yes | +| bouncinessIn | 更改按下时的弹性。 | number | no | All | yes | +| bouncinessOut | 更改松开时的弹性。 | number | no | All | yes | ### diff --git a/zh-cn/react-native-check-box.md b/zh-cn/react-native-check-box.md index 5d6504f957a0e882574ff5674bf2533d3bffde12..161ccebdb9bd7627b2408c0630271aa98f0e046f 100644 --- a/zh-cn/react-native-check-box.md +++ b/zh-cn/react-native-check-box.md @@ -16,6 +16,10 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| :--- | :--- | +| 2.1.7 | 0.72/0.77 | + 进入到工程目录并输入以下命令： @@ -79,6 +83,7 @@ const styles = StyleSheet.create({ 1. RNOH：0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.25; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. 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; ## 属性 @@ -86,22 +91,22 @@ const styles = StyleSheet.create({ > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------- | ----------- | -------- | -| style | Custom style checkbox | ViewPropTypes.style | No | Android、IOS | Yes | -| leftText | Custom left Text | PropTypes.string | No | Android、IOS | Yes | -| leftTextStyle | Custom left Text style | Text.propTypes.style | No | Android、IOS | Yes | -| rightText | Custom right Text | PropTypes.string | No | Android、IOS | Yes | -| rightTextView | Custom right TextView | PropTypes.element | No | Android、IOS | Yes | -| rightTextStyle | Custom right Text style | Text.propTypes.style | No | Android、IOS | Yes | -| checkedImage | Custom checked Image | PropTypes.element | No | Android、IOS | Yes | -| unCheckedImage | Custom unchecked Image | PropTypes.element | No | Android、IOS | Yes | -| isChecked | checkbox checked state | PropTypes.bool | Yes | Android、IOS | Yes | -| onClick | callback function | PropTypes.func.isRequired | Yes | Android、IOS | Yes | -| disabled | Disable the checkbox button | PropTypes.bool | No | Android、IOS | Yes | -| checkBoxColor | Tint color of the checkbox image (this props is for both checked and unchecked state) | PropTypes.string | Yes | Android、IOS | Yes | -| checkedCheckBoxColor | Tint color of the checked state checkbox image (this prop will override value of checkBoxColor for checked state) | PropTypes.string | No | Android、IOS | Yes | -| uncheckedCheckBoxColor | Tint color of the unchecked state checkbox image (this prop will override value of checkBoxColor for unchecked state) | PropTypes.string | No | Android、IOS | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| style | 自定义复选框样式 | ViewPropTypes.style | No | Android、IOS | Yes | +| leftText | 自定义左侧文本 | PropTypes.string | No | Android、IOS | Yes | +| leftTextStyle | 自定义左侧文本样式 | Text.propTypes.style | No | Android、IOS | Yes | +| rightText | 自定义右侧文本 | PropTypes.string | No | Android、IOS | Yes | +| rightTextView | 自定义右侧文本视图 | PropTypes.element | No | Android、IOS | Yes | +| rightTextStyle | 自定义右侧文本样式 | Text.propTypes.style | No | Android、IOS | Yes | +| checkedImage | 自定义选中状态图片 | PropTypes.element | No | Android、IOS | Yes | +| unCheckedImage | 自定义未选中状态图片 | PropTypes.element | No | Android、IOS | Yes | +| isChecked | 复选框选中状态 | PropTypes.bool | Yes | Android、IOS | Yes | +| onClick | 回调函数 | PropTypes.func.isRequired | Yes | Android、IOS | Yes | +| disabled | 禁用复选框按钮 | PropTypes.bool | No | Android、IOS | Yes | +| checkBoxColor | 复选框图片的着色颜色（此属性同时适用于选中和未选中状态） | PropTypes.string | Yes | Android、IOS | Yes | +| checkedCheckBoxColor | 选中状态复选框图片的着色颜色（此属性将覆盖 checked 状态下的 checkBoxColor 值） | PropTypes.string | No | Android、IOS | Yes | +| uncheckedCheckBoxColor | 未选中状态复选框图片的着色颜色（此属性将覆盖 unchecked 状态下的 checkBoxColor 值） | PropTypes.string | No | Android、IOS | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-collapsible.md b/zh-cn/react-native-collapsible.md index 82e39d338ed239ad52f265a093efe63f76a1186f..2a77b62b2c175b8a47d0b6af7a412358ef829a98 100644 --- a/zh-cn/react-native-collapsible.md +++ b/zh-cn/react-native-collapsible.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 1.6.1 | 0.72 | +| 1.6.2 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# 0.72 npm install react-native-collapsible@1.6.1 + +# 0.77 +npm install react-native-collapsible@1.6.2 ``` #### **yarn** ```bash +# 0.72 yarn add react-native-collapsible@1.6.1 + +# 0.77 +yarn add react-native-collapsible@1.6.2 ``` @@ -91,6 +104,7 @@ const CONTENT = [ 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.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. 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; ## 属性 @@ -98,42 +112,42 @@ const CONTENT = [ > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 #### Collapsible -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | enum | no | All | yes | -| **`collapsed`** | Whether to show the child components or not | boolean | no | All | yes | -| **`collapsedHeight`** | Which height should the component collapse to | number | no | All | yes | -| **`enablePointerEvents`** | Enable pointer events on collapsed view | boolean | no | All | yes | -| **`duration`** | Duration of transition in milliseconds | number | no | All | yes | -| **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | string \| function | no | All | yes | -| **`renderChildrenCollapsed`** | Render children in collapsible even if not visible. | boolean | no | All | yes | -| **`style`** | Optional styling for the container | object | no | All | yes | -| **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | function | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| **`align`** | 过渡时内容的对齐方式，可以是 `top`、`center` 或 `bottom`。 | enum | no | All | yes | +| **`collapsed`** | 是否显示子组件。 | boolean | no | All | yes | +| **`collapsedHeight`** | 组件折叠后的高度。 | number | no | All | yes | +| **`enablePointerEvents`** | 在折叠视图上启用指针事件。 | boolean | no | All | yes | +| **`duration`** | 过渡持续时间（以毫秒为单位）。 | number | no | All | yes | +| **`easing`** | 来自 [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) 的函数或函数名（如果 RN < 0.8，则是 [`tween-functions`](https://github.com/chenglou/tween-functions)）。如果你使用类似 `tween-functions` 的命名方式，Collapsible 会尝试为你组合 `Easing` 函数。 | string \| function | no | All | yes | +| **`renderChildrenCollapsed`** | 即使不可见，也在折叠组件中渲染子元素。 | boolean | no | All | yes | +| **`style`** | 容器的可选样式。 | object | no | All | yes | +| **`onAnimationEnd`** | 切换动画结束时的回调。用于避免在动画期间进行繁重的布局工作。 | function | no | All | yes | #### Accordion -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| **`sections`** | An array of sections passed to the render methods | array | no | All | yes | -| **`renderHeader(content, index, isActive, sections)`** | A function that should return a renderable representing the header | function | no | All | yes | -| **`renderContent(content, index, isActive, sections)`** | A function that should return a renderable representing the content | function | no | All | yes | -| **`renderFooter(content, index, isActive, sections)`** | A function that should return a renderable representing the footer | function | no | All | yes | -| **`renderSectionTitle(content, index, isActive)`** | A function that should return a renderable representing the title of the section outside the touchable element | function | no | All | yes | -| **`onChange(indexes)`** | A function that is called when the currently active section(s) are updated. | function | no | All | yes | -| **`keyExtractor(item, index)`** | Used to extract a unique key for a given item at the specified index. | function | no | All | yes | -| **`activeSections`** | Control which indices in the `sections` array are currently open. If empty, closes all sections. | array | no | All | yes | -| **`underlayColor`** | The color of the underlay that will show through when tapping on headers. Defaults to black. | string | no | All | yes | -| **`touchableComponent`** | The touchable component used in the Accordion. Defaults to `TouchableHighlight` | object | no | All | yes | -| **`touchableProps`** | Properties for the `touchableComponent` | object | no | All | yes | -| **`disabled`** | Set whether the user can interact with the Accordion | boolean | no | All | yes | -| **`align`** | See `Collapsible` | enum | no | All | yes | -| **`duration`** | See `Collapsible` | number | no | All | yes | -| **`easing`** | See `Collapsible` | string \| function | no | All | yes | -| **`onAnimationEnd(key, index)`** | See `Collapsible`. | function | no | All | yes | -| **`expandFromBottom`** | Expand content from the bottom instead of the top | boolean | no | All | yes | -| **`expandMultiple`** | Allow more than one section to be expanded. Defaults to false. | boolean | no | All | yes | -| **`sectionContainerStyle`** | Optional styling for the section container. | object | no | All | yes | -| **`containerStyle`** | Optional styling for the Accordion container. | object | no | All | yes | -| **`renderAsFlatList`** | Optional rendering as FlatList (defaults to false). | boolean | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| **`sections`** | 传递给渲染方法的 sections 数组。 | array | no | All | yes | +| **`renderHeader(content, index, isActive, sections)`** | 一个函数，应返回表示标题的可渲染内容。 | function | no | All | yes | +| **`renderContent(content, index, isActive, sections)`** | 一个函数，应返回表示内容的可渲染内容。 | function | no | All | yes | +| **`renderFooter(content, index, isActive, sections)`** | 一个函数，应返回表示页脚的可渲染内容。 | function | no | All | yes | +| **`renderSectionTitle(content, index, isActive)`** | 一个函数，应返回表示可触摸元素外部 section 标题的可渲染内容。 | function | no | All | yes | +| **`onChange(indexes)`** | 当当前激活的 section 更新时调用的函数。 | function | no | All | yes | +| **`keyExtractor(item, index)`** | 用于提取指定索引处给定项的唯一键。 | function | no | All | yes | +| **`activeSections`** | 控制 `sections` 数组中哪些索引当前处于展开状态。如果为空，则关闭所有 section。 | array | no | All | yes | +| **`underlayColor`** | 点击标题时显示的底层颜色。默认为黑色。 | string | no | All | yes | +| **`touchableComponent`** | Accordion 中使用的可触摸组件。默认为 `TouchableHighlight`。 | object | no | All | yes | +| **`touchableProps`** | `touchableComponent` 的属性。 | object | no | All | yes | +| **`disabled`** | 设置用户是否可以与 Accordion 交互。 | boolean | no | All | yes | +| **`align`** | 见 `Collapsible`。 | enum | no | All | yes | +| **`duration`** | 见 `Collapsible`。 | number | no | All | yes | +| **`easing`** | 见 `Collapsible`。 | string \| function | no | All | yes | +| **`onAnimationEnd(key, index)`** | 见 `Collapsible`。 | function | no | All | yes | +| **`expandFromBottom`** | 从底部而不是顶部展开内容。 | boolean | no | All | yes | +| **`expandMultiple`** | 允许展开多个 section。默认为 false。 | boolean | no | All | yes | +| **`sectionContainerStyle`** | section 容器的可选样式。 | object | no | All | yes | +| **`containerStyle`** | Accordion 容器的可选样式。 | object | no | All | yes | +| **`renderAsFlatList`** | 可选作为 FlatList 渲染（默认为 false）。 | boolean | no | All | yes | ## 遗留问题 diff --git a/zh-cn/react-native-community-hooks.md b/zh-cn/react-native-community-hooks.md index e250b201fd0e501ca1e37124caf0407e0171bdd8..2f21f6841ed1d51026a84513048a799d837d7ddb 100644 --- a/zh-cn/react-native-community-hooks.md +++ b/zh-cn/react-native-community-hooks.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 3.0.0 | 0.72 | +| 3.1.0 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,15 +28,25 @@ #### npm ```bash +# 0.72 npm install @react-native-community/hooks@3.0.0 + +# 0.77 +npm install @react-native-community/hooks@3.1.0 ``` + #### yarn ```bash +# 0.72 yarn add @react-native-community/hooks@3.0.0 + +# 0.77 +yarn add @react-native-community/hooks@3.1.0 ``` + 下面的代码展示了这个库的基本使用场景： @@ -130,6 +145,7 @@ const styles = StyleSheet.create({ 1.RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; 2.RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3.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; ## API @@ -138,27 +154,29 @@ const styles = StyleSheet.create({ > [!Tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|----------------|-------------------------------| -- | -------- | ----------- | ----------------- | -| useAccessibilityInfo | Check whether some configurations of the device are enabled.See useAccessibilityInfo Api | Function | False | Android / iOS | Yes | -| useAppState | Tells you whether the application is in the foreground or background | Function | False | Android / iOS | Yes | -| useBackHandler | Used to listen for the back button event on the device. You can call your own function to handle the back behavior. | Function | False | Android / iOS | Yes | -| useImageDimensions | Used to listen for the back button event on the device. You can call your own function to handle the back behavior. | Function | False | Android / iOS | Yes | -| useKeyboard | Return whether the keyboard is invoked and the keyboard width and height. | Function | False | Android / iOS | Yes | -| useInteractionManager | Schedule some of the more time-consuming tasks for after all the interactions or animations have been completed. | Function | False | Android / iOS | Yes | -| useDeviceOrientation | Check whether the device is in landscape or portrait mode. | Function | False | Android / iOS | Yes | -| useLayout | Returns the x-axis and y-axis coordinates of an element and the width and height of the element. | Function | False | Android / iOS | Yes | -| useRefresh | pull down to refresh. | Function | False | Android / iOS | Yes | - -useAccessibilityInfo 方法返回值 -| Name | Description | Platform | HarmonyOS Support | -|----------------|-------------------------------| -------- | ----------------- | -| isBoldTextEnabled | whether bold text is enabled | iOS | Yes | -| isScreenReaderEnabled | Whether the Screen Reading Function Is Enabled | Android / iOS | Yes | -| isGrayscaleEnabled | Whether grayscale mode is enabled | iOS | No | -| isInvertColorsEnabled | Whether color inversion is enabled | iOS | No | -| isReduceMotionEnabled | Whether reduction animation is enabled | Android / iOS | No | -| isReduceTransparencyEnabled | Whether reduce transparency is enabled | iOS | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|---|---|---|---|---|---| +| useAccessibilityInfo | 检查设备的某些配置是否已启用。详见 useAccessibilityInfo Api | Function | False | Android / iOS | Yes | +| useAppState | 告知应用当前是在前台还是后台。 | Function | False | Android / iOS | Yes | +| useBackHandler | 用于监听设备上的返回按钮事件。您可以调用自己的函数来处理返回行为。 | Function | False | Android / iOS | Yes | +| useImageDimensions | 用于监听设备上的返回按钮事件。您可以调用自己的函数来处理返回行为。 | Function | False | Android / iOS | Yes | +| useKeyboard | 返回键盘是否弹出及其宽度和高度。 | Function | False | Android / iOS | Yes | +| useInteractionManager | 在所有交互或动画完成后，安排执行一些较为耗时的任务。 | Function | False | Android / iOS | Yes | +| useDeviceOrientation | 检查设备处于横屏还是竖屏模式。 | Function | False | Android / iOS | Yes | +| useLayout | 返回一个元素的 x 轴和 y 轴坐标，以及其宽度和高度。 | Function | False | Android / iOS | Yes | +| useRefresh | 下拉刷新。 | Function | False | Android / iOS | Yes | + + +**useAccessibilityInfo 方法返回值** +| Name | Description | Platform | HarmonyOS Support | +|---|---|---|---| +| isBoldTextEnabled | 粗体文本是否已启用。 | iOS | Yes | +| isScreenReaderEnabled | 屏幕阅读功能是否已启用。 | Android / iOS | Yes | +| isGrayscaleEnabled | 灰度模式是否已启用。 | iOS | No | +| isInvertColorsEnabled | 颜色反转是否已启用。 | iOS | No | +| isReduceMotionEnabled | 减弱动态效果（动画）是否已启用。 | Android / iOS | No | +| isReduceTransparencyEnabled | 降低透明度是否已启用。 | iOS | No | + ## 遗留问题 @@ -166,4 +184,4 @@ useAccessibilityInfo 方法返回值 ## 开源协议 -本项目基于 [The ISC License (ISC)](https://github.com/react-native-community/hooks/blob/main/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The ISC License (ISC)](https://github.com/react-native-community/hooks/blob/main/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-drop-shadow.md b/zh-cn/react-native-drop-shadow.md index 1f2303ef90c7ac3b8884949c9efe4dcf86148a0a..678f98a16a8826b7a757725ac2378f4bf3c4726e 100644 --- a/zh-cn/react-native-drop-shadow.md +++ b/zh-cn/react-native-drop-shadow.md @@ -17,20 +17,36 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 1.0.0 | 0.72 | +| 1.0.3 | 0.77 | + +进入到工程目录并输入以下命令： + #### **npm** ```bash +# 0.72 npm install react-native-drop-shadow@1.0.0 + +# 0.77 +npm install react-native-drop-shadow@1.0.3 ``` -#### **yarn** +#### **yarn** ```bash +# 0.72 yarn add react-native-drop-shadow@1.0.0 + +# 0.77 +yarn add react-native-drop-shadow@1.0.3 ``` + 下面的代码展示了这个库的基本使用场景： @@ -129,6 +145,8 @@ react-native-harmony: 0.72.23; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco react-native-harmony: 0.72.33; SDK: Openharmony 5.0.0.71(API Version 12 Release); IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71; +react-native-harmony: 0.77.18; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; + ## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 diff --git a/zh-cn/react-native-gifted-chat.md b/zh-cn/react-native-gifted-chat.md index 97d4a5f245000ecf38826676a6830cab7096ff89..c6779b06aad19256eef1e9ea2762db8e49ad47ab 100644 --- a/zh-cn/react-native-gifted-chat.md +++ b/zh-cn/react-native-gifted-chat.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 2.4.0 | 0.72 | +| 2.8.1 | 0.77 | + 进入到工程目录并输入以下命令： @@ -98,9 +103,9 @@ export function App() { ``` Link -本库 HarmonyOS 侧2.8.1版本实现依赖@react-native-ohos/react-native-keyboard-controller的代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库 HarmonyOS 侧2.8.1版本实现依赖react-native-keyboard-controller的代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照@react-native-ohos/react-native-keyboard-controller文档(/zh-cn/react-native-keyboard-controller.md)进行引入。 +如未引入请参照[react-native-keyboard-controller 文档](/zh-cn/react-native-keyboard-controller.md#link) ## 约束与限制 @@ -110,6 +115,7 @@ Link 1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1); IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; 2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. 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; ## 属性 @@ -119,89 +125,89 @@ Link | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------------------: | :----------------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: | -| **messageContainerRef** | *Ref to the flatlist* | *FlatList ref* | No | iOS/Android | Yes | -| **textInputRef** | Text field error text | *TextInput ref* | No | iOS/Android | Yes | -| **messages** | Messages to display | *Array* | No | iOS/Android | Yes | -| **isTyping** | Typing Indicator state; If you use`renderFooter` it will override this | Boolean | No | iOS/Android | Yes | -| **text** | Input text | String | No | iOS/Android | Yes | -| **placeholder** | Placeholder when `text` is empty; default is `'Type a message...'` | String | No | iOS/Android | Yes | -| **messageIdGenerator** | Generate an id for new messages. Defaults to UUID v4 | *Function* | No | iOS/Android | Yes | -| **user** | User sending the messages | *Object* | No | iOS/Android | Yes | -| **onSend** | Callback when sending a message | *Function* | No | iOS/Android | Yes | -| **alwaysShowSend** | Always show send button in input text composer | Boolean | No | iOS/Android | Yes | -| **locale** | Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`) | *String* | No | iOS/Android | Yes | -| **timeFormat** | *(String)* - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format)) | *String* | No | iOS/Android | Yes | -| **dateFormatCalendar**2.8.1+ | Format to use for rendering relative times; Today - for now (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar)) | *String* | No | iOS/Android | Yes | -| **dateFormat** | Format to use for rendering dates; default is `'ll'` (see [Day.js Format](https://day.js.org/docs/en/display/format)) | *String* | No | iOS/Android | Yes | -| **loadEarlier** | Enables the "load earlier messages" button, required for `infiniteScroll` | Boolean | No | iOS/Android | Yes | -| **isKeyboardInternallyHandled** | Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true` | Boolean | No | iOS/Android | Yes | -| **disableKeyboardController**2.8.1+ | Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false` | Boolean | No | iOS/Android | Yes | -| **onLoadEarlier** | Callback when loading earlier messages | *Function* | No | iOS/Android | Yes | -| **isLoadingEarlier** | Display an `ActivityIndicator` when loading earlier messages | Boolean | No | iOS/Android | Yes | -| **renderLoading** | Render a loading view when initializing | *Function* | No | iOS/Android | Yes | -| **renderLoadEarlier** | Custom "Load earlier messages" button | *Function* | No | iOS/Android | Yes | -| **renderAvatar** | Custom message avatar; set to `null` to not render any avatar for the message | *Function* | No | iOS/Android | Yes | -| **showUserAvatar** | Whether to render an avatar for the current user; default is `false`, only show avatars for other users | Boolean | No | iOS/Android | Yes | -| **showAvatarForEveryMessage** | avatars will only be displayed when a consecutive message is from the same user on the same day; | Boolean | No | iOS/Android | Yes | -| **onPressAvatar** | Callback when a message avatar is tapped | *Function* | No | iOS/Android | Yes | -| **onLongPressAvatar** | Callback when a message avatar is long-pressed | *Function* | No | iOS/Android | Yes | -| **renderAvatarOnTop** | Render the message avatar at the top of consecutive messages | Boolean | No | iOS/Android | Yes | -| **renderBubble** | Custom message bubble | *Function* | No | iOS/Android | Yes | -| **renderTicks** | Custom ticks indicator to display message status | Function | No | iOS/Android | Yes | -| **renderSystemMessage** | Custom system message | Function | No | iOS/Android | Yes | -| **onPress** | Callback when a message bubble is pressed | Function | No | iOS/Android | Yes | -| **onLongPress** | Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@{2017-09-25}/src/Bubble.js#L96-L119)) | Function | No | iOS/Android | Yes | -| **inverted** | Reverses display order of `messages` | Boolean | No | iOS/Android | Yes | -| **renderUsernameOnMessage** | ndicate whether to show the user's username inside the message bubble | Boolean | No | iOS/Android | Yes | -| **renderUsername** | Custom Username container | *Function* | No | iOS/Android | Yes | -| **renderMessage** | Custom message container | *Function* | No | iOS/Android | Yes | -| **renderMessageText** | Custom message text | *Function* | No | iOS/Android | Yes | -| **renderMessageImage** | Custom message image | *Function* | No | iOS/Android | Yes | -| **renderMessageVideo** | Custom message video | *Function* | No | iOS/Android | Yes | -| **imageProps** | Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage` | *Object* | No | iOS/Android | Yes | -| **videoProps** | Extra props to be passed to the video component created by the required `renderMessageVideo` | *Object* | No | iOS/Android | Yes | -| **imageSourceProps**2.8.1+ | Extra props to be passed to the `MessageImage`'s | *Object* | No | iOS/Android | Yes | -| **lightboxProps** | Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox) | *Object* | No | iOS/Android | Yes | -| **isCustomViewBottom** | Determine whether renderCustomView is displayed before or after the text, image and video views | Boolean | No | iOS/Android | Yes | -| **renderCustomView** | Custom view inside the bubble | *Function* | No | iOS/Android | Yes | -| **renderDay** | Custom day above a message | *Function* | No | iOS/Android | Yes | -| **renderTime** | Custom time inside a message | *Function* | No | iOS/Android | Yes | -| **renderFooter** | Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true | *Function* | No | iOS/Android | Yes | -| **renderChatEmpty** | Custom component to render in the ListView when messages are empty | *Function* | No | iOS/Android | Yes | -| **renderChatFooter** | Custom component to render below the MessageContainer (separate from the ListView) | *Function* | No | iOS/Android | Yes | -| **renderInputToolbar** | Custom message composer container | *Function* | No | iOS/Android | Yes | -| **renderComposer** | Custom text input message composer | *Function* | No | iOS/Android | Yes | -| **renderActions** | Custom action button on the left of the message composer | *Function* | No | iOS/Android | Yes | -| **renderSend** | Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487)) | *Function* | No | iOS/Android | Yes | -| **renderAccessory** | Custom second line of actions below the message composer | *Function* | No | iOS/Android | Yes | -| **onPressActionButton** | Callback when the Action button is pressed (if set, the default `actionSheet` will not be used) | *Function* | No | iOS/Android | Yes | -| **bottomOffset** | Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar) | Number | No | iOS/Android | No | -| **focusOnInputWhenOpeningKeyboard**2.8.1+ | Focus on automatically when opening the keyboard; default true | Bool | No | iOS/Android | No | -| **minInputToolbarHeight** | Minimum height of the input toolbar; default is `44` | Number | No | iOS/Android | No | -| **listViewProps** | Extra props to be passed to the messages [``](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details | *Object* | No | iOS/Android | Yes | -| **textInputProps** | Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/textinput.html) | *Object* | No | iOS/Android | Yes | -| **textInputStyle** | Custom style to be passed to the [``](https://facebook.github.io/react-native/docs/textinput.html) | *Object* | No | iOS/Android | Yes | -| **multiline** | Indicates whether to allow the [``](https://facebook.github.io/react-native/docs/textinput.html) to be multiple lines or not; | Boolean | No | iOS/Android | Yes | -| **keyboardShouldPersistTaps** | Determines whether the keyboard should stay visible after a tap; see [``](https://facebook.github.io/react-native/docs/scrollview.html) docs | String | No | iOS/Android | Yes | -| **onInputTextChanged** | Callback when the input text changes | *Function* | No | iOS/Android | Yes | -| **maxInputLength** | Max message composer TextInput length | *Number* | No | iOS/Android | Yes | -| **parsePatterns** | Custom parse patterns for [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text) used to linking message content (like URLs and phone numbers), e.g.: | *Function* | No | iOS/Android | Yes | -| **extraData** | Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc. | *Object* | No | iOS/Android | Yes | -| **minComposerHeight** | Custom min-height of the composer | *Object* | No | iOS/Android | Yes | -| **maxComposerHeight** | Custom max height of the composer | *Object* | No | iOS/Android | No | -| **scrollToBottom** | Enables the scroll to bottom Component (Default is false) | Boolean | No | iOS/Android | Yes | -| **scrollToBottomComponent** | Custom Scroll To Bottom Component container | *Function* | No | iOS/Android | Yes | -| **scrollToBottomOffset** | Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200) | *Number* | No | iOS/Android | Yes | -| **scrollToBottomStyle** | Custom style for Bottom Component container | *Object* | No | iOS/Android | Yes | -| **alignTop** | Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom) | *Boolean* | No | iOS/Android | Yes | -| **onQuickReply** | Callback when sending a quick reply (to backend server) | *Function* | No | iOS/Android | Yes | -| **renderQuickReplies** | Custom all quick reply view | *Function* | No | iOS/Android | Yes | -| **quickReplyStyle** | Custom quick reply view style | *Object* | No | iOS/Android | Yes | -| **quickReplyContainerStyle**2.8.1+ | Custom quick reply container view style | *Object* | No | iOS/Android | Yes | -| **renderQuickReplySend** | Custom quick reply send view | *Function* | No | iOS/Android | Yes | -| **shouldUpdateMessage** | Lets the message component know when to update outside of normal cases. | *Function* | No | iOS/Android | Yes | -| **infiniteScroll** | infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too. | *Boolean* | No | iOS/Android | Yes | -| **isStatusBarTranslucentAndroid**2.8.1+ | If you use translucent status bar on Android, set this option to true. Ignored on iOS. | *Boolean* | No | iOS/Android | Yes | +| **messageContainerRef** | 指向 FlatList 的引用 (Ref) | *FlatList ref* | No | iOS/Android | Yes | +| **textInputRef** | 指向 TextInput 的引用 (Ref) | *TextInput ref* | No | iOS/Android | Yes | +| **messages** | 要显示的消息 | *Array* | No | iOS/Android | Yes | +| **isTyping** | 输入指示器状态；如果使用了 `renderFooter`，将会覆盖此设置 | Boolean | No | iOS/Android | Yes | +| **text** | 输入的文本 | String | No | iOS/Android | Yes | +| **placeholder** | 当 `text` 为空时的占位符；默认为 `'Type a message...'` | String | No | iOS/Android | Yes | +| **messageIdGenerator** | 为新消息生成 ID。默认为 UUID v4 | *Function* | No | iOS/Android | Yes | +| **user** | 发送消息的用户 | *Object* | No | iOS/Android | Yes | +| **onSend** | 发送消息时的回调 | *Function* | No | iOS/Android | Yes | +| **alwaysShowSend** | 在文本输入编辑器中始终显示发送按钮 | Boolean | No | iOS/Android | Yes | +| **locale** | 用于本地化日期的语言环境 (Locale)。你需要先导入所需的语言环境（例如 `require('dayjs/locale/de')` 或 `import 'dayjs/locale/fr'`) | *String* | No | iOS/Android | Yes | +| **timeFormat** | *(String)* - 用于渲染时间的格式；默认为 `'LT'`（参见 [Day.js Format](https://day.js.org/docs/en/display/format)） | *String* | No | iOS/Android | Yes | +| **dateFormatCalendar**2.8.1+ | 用于渲染相对时间的格式；例如 Today（参见 [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar)） | *String* | No | iOS/Android | Yes | +| **dateFormat** | 用于渲染日期的格式；默认为 `'ll'`（参见 [Day.js Format](https://day.js.org/docs/en/display/format)） | *String* | No | iOS/Android | Yes | +| **loadEarlier** | 启用“加载更早消息”按钮，`infiniteScroll` 需要此项 | Boolean | No | iOS/Android | Yes | +| **isKeyboardInternallyHandled** | 决定是否在插件内部处理键盘感知。如果你在插件外部有自己的键盘处理逻辑，请将其设为 false；默认为 `true` | Boolean | No | iOS/Android | Yes | +| **disableKeyboardController**2.8.1+ | 完全禁用 react-native-keyboard-controller。在使用 react-native-navigation 或其他冲突的键盘库时很有用；默认为 `false` | Boolean | No | iOS/Android | Yes | +| **onLoadEarlier** | 加载更早消息时的回调 | *Function* | No | iOS/Android | Yes | +| **isLoadingEarlier** | 加载更早消息时显示 `ActivityIndicator` | Boolean | No | iOS/Android | Yes | +| **renderLoading** | 初始化时渲染加载视图 | *Function* | No | iOS/Android | Yes | +| **renderLoadEarlier** | 自定义“加载更早消息”按钮 | *Function* | No | iOS/Android | Yes | +| **renderAvatar** | 自定义消息头像；设置为 `null` 则不渲染该消息的任何头像 | *Function* | No | iOS/Android | Yes | +| **showUserAvatar** | 是否渲染当前用户的头像；默认为 `false`，仅显示其他用户的头像 | Boolean | No | iOS/Android | Yes | +| **showAvatarForEveryMessage** | 即使是同一用户同一天的连续消息，也会显示头像 | Boolean | No | iOS/Android | Yes | +| **onPressAvatar** | 点击消息头像时的回调 | *Function* | No | iOS/Android | Yes | +| **onLongPressAvatar** | 长按消息头像时的回调 | *Function* | No | iOS/Android | Yes | +| **renderAvatarOnTop** | 在连续消息的顶部渲染消息头像 | Boolean | No | iOS/Android | Yes | +| **renderBubble** | 自定义消息气泡 | *Function* | No | iOS/Android | Yes | +| **renderTicks** | 自定义勾号指示器以显示消息状态 | Function | No | iOS/Android | Yes | +| **renderSystemMessage** | 自定义系统消息 | Function | No | iOS/Android | Yes | +| **onPress** | 点击消息气泡时的回调 | Function | No | iOS/Android | Yes | +| **onLongPress** | 长按消息气泡时的回调；默认显示带有“复制文本”的 ActionSheet（参见[使用 `showActionSheetWithOptions()` 的示例](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@{2017-09-25}/src/Bubble.js#L96-L119)） | Function | No | iOS/Android | Yes | +| **inverted** | 反转 `messages` 的显示顺序 | Boolean | No | iOS/Android | Yes | +| **renderUsernameOnMessage** | 指示是否在消息气泡内显示用户名 | Boolean | No | iOS/Android | Yes | +| **renderUsername** | 自定义用户名容器 | *Function* | No | iOS/Android | Yes | +| **renderMessage** | 自定义消息容器 | *Function* | No | iOS/Android | Yes | +| **renderMessageText** | 自定义消息文本 | *Function* | No | iOS/Android | Yes | +| **renderMessageImage** | 自定义消息图片 | *Function* | No | iOS/Android | Yes | +| **renderMessageVideo** | 自定义消息视频 | *Function* | No | iOS/Android | Yes | +| **imageProps** | 传递给默认 `renderMessageImage` 创建的 `Image` 组件的额外属性 | *Object* | No | iOS/Android | Yes | +| **videoProps** | 传递给必需的 `renderMessageVideo` 创建的视频组件的额外属性 | *Object* | No | iOS/Android | Yes | +| **imageSourceProps**2.8.1+ | 传递给 `MessageImage` 的额外属性 | *Object* | No | iOS/Android | Yes | +| **lightboxProps** | 传递给 `MessageImage` 的 [Lightbox](https://github.com/oblador/react-native-lightbox) 的额外属性 | *Object* | No | iOS/Android | Yes | +| **isCustomViewBottom** | 决定 `renderCustomView` 是显示在文本、图片和视频视图之前还是之后 | Boolean | No | iOS/Android | Yes | +| **renderCustomView** | 气泡内的自定义视图 | *Function* | No | iOS/Android | Yes | +| **renderDay** | 消息上方的自定义日期 | *Function* | No | iOS/Android | Yes | +| **renderTime** | 消息内的自定义时间 | *Function* | No | iOS/Android | Yes | +| **renderFooter** | ListView 上的自定义页脚组件，例如 `'User is typing...'`；参见 [CustomizedFeaturesExample.tsx](https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example/components/chat-examples/CustomizedFeaturesExample.tsx) 示例。覆盖 `isTyping` 为 true 时触发的默认输入指示器 | *Function* | No | iOS/Android | Yes | +| **renderChatEmpty** | 当消息为空时在 ListView 中渲染的自定义组件 | *Function* | No | iOS/Android | Yes | +| **renderChatFooter** | 渲染在 MessageContainer 下方的自定义组件（与 ListView 分离） | *Function* | No | iOS/Android | Yes | +| **renderInputToolbar** | 自定义消息编辑器容器 | *Function* | No | iOS/Android | Yes | +| **renderComposer** | 自定义文本输入消息编辑器 | *Function* | No | iOS/Android | Yes | +| **renderActions** | 消息编辑器左侧的自定义操作按钮 | *Function* | No | iOS/Android | Yes | +| **renderSend** | 自定义发送按钮；你可以很容易地将子元素传递给原始的 `Send` 组件，例如使用自定义图标（[示例](https://github.com/FaridSafi/react-native-gifted-chat/pull/487)） | *Function* | No | iOS/Android | Yes | +| **renderAccessory** | 消息编辑器下方的自定义第二行操作栏 | *Function* | No | iOS/Android | Yes | +| **onPressActionButton** | 点击操作按钮时的回调（如果设置，将不使用默认的 `actionSheet`） | *Function* | No | iOS/Android | Yes | +| **bottomOffset** | 聊天界面距离屏幕底部的距离（例如，如果你显示标签栏时很有用） | Number | No | iOS/Android | No | +| **focusOnInputWhenOpeningKeyboard**2.8.1+ | 打开键盘时自动聚焦；默认为 true | Bool | No | iOS/Android | No | +| **minInputToolbarHeight** | 输入工具栏的最小高度；默认为 `44` | Number | No | iOS/Android | No | +| **listViewProps** | 传递给消息列表 `ListView` 的额外属性；某些属性无法覆盖，详情请参阅 `MessageContainer.render()` 中的代码 | *Object* | No | iOS/Android | Yes | +| **textInputProps** | 传递给 `TextInput` 的额外属性 | *Object* | No | iOS/Android | Yes | +| **textInputStyle** | 传递给 `TextInput` 的自定义样式 | *Object* | No | iOS/Android | Yes | +| **multiline** | 指示是否允许 `TextInput` 多行输入 | Boolean | No | iOS/Android | Yes | +| **keyboardShouldPersistTaps** | 决定点击后键盘是否保持可见；参见 `ScrollView` 文档 | String | No | iOS/Android | Yes | +| **onInputTextChanged** | 输入文本改变时的回调 | *Function* | No | iOS/Android | Yes | +| **maxInputLength** | 消息编辑器 TextInput 的最大长度 | *Number* | No | iOS/Android | Yes | +| **parsePatterns** | 用于 [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text) 的自定义解析模式，用于链接消息内容（如 URL 和电话号码），例如： | *Function* | No | iOS/Android | Yes | +| **extraData** | 用于按需重新渲染 FlatList 的额外属性。这对渲染页脚等很有用。 | *Object* | No | iOS/Android | Yes | +| **minComposerHeight** | 编辑器的自定义最小高度 | *Object* | No | iOS/Android | Yes | +| **maxComposerHeight** | 编辑器的自定义最大高度 | *Object* | No | iOS/Android | No | +| **scrollToBottom** | 启用滚动到底部组件（默认为 false） | Boolean | No | iOS/Android | Yes | +| **scrollToBottomComponent** | 自定义滚动到底部组件容器 | *Function* | No | iOS/Android | Yes | +| **scrollToBottomOffset** | 开始显示滚动到底部组件的自定义高度偏移量（默认为 200） | *Number* | No | iOS/Android | Yes | +| **scrollToBottomStyle** | 底部组件容器的自定义样式 | *Object* | No | iOS/Android | Yes | +| **alignTop** | 控制消息气泡是否出现在聊天界面的顶部（默认为 false - 气泡底部对齐） | *Boolean* | No | iOS/Android | Yes | +| **onQuickReply** | 发送快捷回复时的回调（发送到后端服务器） | *Function* | No | iOS/Android | Yes | +| **renderQuickReplies** | 自定义所有快捷回复视图 | *Function* | No | iOS/Android | Yes | +| **quickReplyStyle** | 自定义快捷回复视图样式 | *Object* | No | iOS/Android | Yes | +| **quickReplyContainerStyle**2.8.1+ | 自定义快捷回复容器视图样式 | *Object* | No | iOS/Android | Yes | +| **renderQuickReplySend** | 自定义快捷回复发送视图 | *Function* | No | iOS/Android | Yes | +| **shouldUpdateMessage** | 让消息组件知道何时在正常情况之外进行更新。 | *Function* | No | iOS/Android | Yes | +| **infiniteScroll** | 当到达消息容器顶部时无限向上滚动，如果存在 `onLoadEarlier` 函数则自动调用（暂不支持 Web）。你需要同时添加 `loadEarlier` 属性。 | *Boolean* | No | iOS/Android | Yes | +| **isStatusBarTranslucentAndroid**2.8.1+ | 如果你在 Android 上使用半透明状态栏，请将此选项设置为 true。在 iOS 上被忽略。 | *Boolean* | No | iOS/Android | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-picker-picker(nocodegen).md b/zh-cn/react-native-picker-picker(nocodegen).md index 34d1eb4e1fd0bf3486543f79f0fe9effdf137ac6..baf030a4a407935916844f235d45ff10db5d0cf4 100644 --- a/zh-cn/react-native-picker-picker(nocodegen).md +++ b/zh-cn/react-native-picker-picker(nocodegen).md @@ -253,35 +253,35 @@ ohpm install ### PickerProps -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|---------------------------|---------------------------------------------------------------------------------------------------|--------------------------------------------------------------|----------|-----------------------|-------------------| -| `onValueChange` | Callback for when an item is selected. | function | No | All | Yes | -| `selectedValue` | Value matching value of one of the items. Can be a string or an integer. | any | No | All | Yes | -| `style` | NA | pickerStyleType | No | All | Yes | -| `testID` | Used to locate this view in end-to-end tests. | string | No | All | Yes | -| `enabled` | If set to false, the picker will be disabled, i.e. the user will not be able to make a selection. | boolean | No | Android, Web, Windows | Yes | -| `mode` | On Android, specifies how to display the selection items when the user taps on the picker | enum('dialog', 'dropdown') | No | Android | No | -| `dropdownIconColor` | On Android, specifies color of dropdown triangle. | ColorValue | No | Android | No | -| `dropdownIconRippleColor` | On Android, specifies ripple color of dropdown triangle. | ColorValue | No | Android | No | -| `prompt` | Prompt string for this picker, used on Android in dialog mode as the title of the dialog. | string | No | Android | No | -| `itemStyle` | Style to apply to each of the item labels. | [text styles](https://reactnative.dev/docs/text-style-props) | No | iOS, Windows | partially | -| `numberOfLines` | On Android & iOS, used to truncate the text with an ellipsis after computing the text layout. | number | No | Android, iOS | No | -| `onBlur` | NA | function | No | Android | No | -| `onFocus` | NA | function | No | Android | No | -| `selectionColor` | Color to apply to the selection indicator. | ColorValue | No | iOS | Yes | -| `themeVariant` | NA | enum('light', 'dark') | No | iOS | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `onValueChange` | 选中某项时的回调函数。 | function | No | All | Yes | +| `selectedValue` | 与其中某项的值相匹配的值。可以是字符串或整数。 | any | No | All | Yes | +| `style` | 应用于 Picker 视图的样式。 | pickerStyleType | No | All | Yes | +| `testID` | 用于在端到端测试中定位此视图。 | string | No | All | Yes | +| `enabled` | 如果设置为 false，选择器将被禁用，即用户将无法进行选择。 | boolean | No | Android, Web, Windows | Yes | +| `mode` | 在 Android 上，指定用户点击选择器时如何显示选项。 | enum('dialog', 'dropdown') | No | Android | No | +| `dropdownIconColor` | 在 Android 上，指定下拉三角形的颜色。 | ColorValue | No | Android | No | +| `dropdownIconRippleColor` | 在 Android 上，指定下拉三角形的波纹颜色。 | ColorValue | No | Android | No | +| `prompt` | 此选择器的提示字符串，在 Android 的 dialog 模式下用作对话框标题。 | string | No | Android | No | +| `itemStyle` | 应用于每个选项标签的样式。 | [text styles](https://reactnative.dev/docs/text-style-props) | No | iOS, Windows | partially | +| `numberOfLines` | 在 Android 和 iOS 上，用于在计算文本布局后用省略号截断文本。 | number | No | Android, iOS | No | +| `onBlur` | 当选择器失去焦点时的回调函数。 | function | No | Android | No | +| `onFocus` | 当选择器获得焦点时的回调函数。 | function | No | Android | No | +| `selectionColor` | 应用于选中指示器的颜色。 | ColorValue | No | iOS | Yes | +| `themeVariant` | 指定 iOS 上的主题变体（例如 'light' 或 'dark'）。 | enum('light', 'dark') | No | iOS | No | ### PickerItemProps -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|----------------------|----------------------------------------------------------------------------------------------------------|---------------|----------|----------|-------------------| -| `label` | Displayed value on the Picker Item. | string | Yes | All | Yes | -| `value` | Actual value on the Picker Item. | number,string | Yes | All | Yes | -| `color` | Displayed color on the Picker Item. | ColorValue | Yes | All | No | -| `fontFamily` | Displayed fontFamily on the Picker Item. | string | No | All | No | -| `style` | Style to apply to individual item labels. | ViewStyleProp | No | Android | No | -| `enabled` | If set to false, the specific item will be disabled, i.e. the user will not be able to make a selection. | boolean | No | Android | No | -| `contentDescription` | Sets the content description to the Picker Item. | string | No | Android | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `label` | 显示在 Picker 选项上的文字。 | string | Yes | All | Yes | +| `value` | Picker 选项的实际值。 | number,string | Yes | All | Yes | +| `color` | Picker 选项显示的颜色。 | ColorValue | No | All | No | +| `fontFamily` | Picker 选项显示的字体。 | string | No | All | No | +| `style` | 应用于单个选项标签的样式。 | ViewStyleProp | No | Android | No | +| `enabled` | 如果设置为 false，该特定选项将被禁用，即用户无法选中它。 | boolean | No | Android | No | +| `contentDescription` | 设置 Picker 选项的内容描述。 | string | No | Android | No | ## 静态方法 @@ -289,10 +289,10 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|---------|---------------------------------|----------|----------|----------|-------------------| -| `blur` | Programmatically closes picker. | function | No | Android | No | -| `focus` | Programmatically opens picker. | function | No | Android | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `blur` | 以编程方式关闭选择器。 | function | No | Android | No | +| `focus` | 以编程方式打开选择器。 | function | No | Android | No | ## 遗留问题 @@ -305,4 +305,4 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/picker/blob/sig/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/picker/blob/sig/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-picker-picker.md b/zh-cn/react-native-picker-picker.md index 99d08e884c92a35c701360adabb6c0d32d3c23d4..7ab5b0cda5b011cbaca91a08ac69fe8155534dd6 100644 --- a/zh-cn/react-native-picker-picker.md +++ b/zh-cn/react-native-picker-picker.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.6.1 | [@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases) | 0.72 | +| 2.11.1 | [@react-native-ohos/picker Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/picker + +# 0.77 +npm install @react-native-ohos/picker ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/picker + +# 0.77 +yarn add @react-native-ohos/picker ``` @@ -42,7 +57,8 @@ yarn add @react-native-oh-tpl/picker ```js import * as React from "react"; -import { Picker } from "@react-native-oh-tpl/picker"; +import { Picker } from "@react-native-picker/picker"; + import { View } from "react-native"; export const PickerExample = ()=>{ @@ -63,6 +79,8 @@ export const PickerExample = ()=>{ ## 使用 Codegen +> [!TIP] V2.11.1 不需要执行 Codegen。 + 本库已经适配了 Codegen ，在使用前需要主动执行生成三方库桥接代码，详细请参考 [Codegen 使用文档。](/zh-cn/codegen.md) ## Link @@ -95,6 +113,8 @@ export const PickerExample = ()=>{ 打开 `entry/oh-package.json5`，添加以下依赖 +- 0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -103,6 +123,16 @@ export const PickerExample = ()=>{ } ``` +- 0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/picker": "file:../../node_modules/@react-native-ohos/picker/harmony/picker.har", + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -140,7 +170,12 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) +# 0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/picker/src/main/cpp" ./picker) + +# 0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/picker/src/main/cpp" ./picker) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -184,8 +219,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// 0.72 + import { RNCPicker, PICKER_TYPE } from "@react-native-oh-tpl/picker" +// 0.77 ++ import { RNCPicker, PICKER_TYPE } from "@react-native-ohos/picker" + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -219,8 +258,12 @@ const arkTsComponentNames: Array = [ ```diff ... +// 0.72 + import { RNCPickerPackage } from '@react-native-oh-tpl/picker/ts'; +// 0.77 ++ import { RNCPickerPackage } from '@react-native-ohos/picker/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -246,9 +289,9 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases) +本文档内容基于以下版本验证通过： +1. RNOH：0.72.86; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +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; ## 属性 @@ -258,42 +301,42 @@ ohpm install ### PickerProps -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|---------------------------|---------------------------------------------------------------------------------------------------|--------------------------------------------------------------|----------|-----------------------|-------------------| -| `onValueChange` | Callback for when an item is selected. | function | No | All | Yes | -| `selectedValue` | Value matching value of one of the items. Can be a string or an integer. | any | No | All | Yes | -| `style` | NA | pickerStyleType | No | All | Yes | -| `testID` | Used to locate this view in end-to-end tests. | string | No | All | Yes | -| `enabled` | If set to false, the picker will be disabled, i.e. the user will not be able to make a selection. | boolean | No | Android, Web, Windows | Yes | -| `mode` | On Android, specifies how to display the selection items when the user taps on the picker | enum('dialog', 'dropdown') | No | Android | No | -| `dropdownIconColor` | On Android, specifies color of dropdown triangle. | ColorValue | No | Android | No | -| `dropdownIconRippleColor` | On Android, specifies ripple color of dropdown triangle. | ColorValue | No | Android | No | -| `prompt` | Prompt string for this picker, used on Android in dialog mode as the title of the dialog. | string | No | Android | No | -| `itemStyle` | Style to apply to each of the item labels. | [text styles](https://reactnative.dev/docs/text-style-props) | No | iOS, Windows | partially | -| `numberOfLines` | On Android & iOS, used to truncate the text with an ellipsis after computing the text layout. | number | No | Android, iOS | No | -| `onBlur` | NA | function | No | Android | No | -| `onFocus` | NA | function | No | Android | No | -| `selectionColor` | Color to apply to the selection indicator. | ColorValue | No | iOS | Yes | -| `themeVariant` | NA | enum('light', 'dark') | No | iOS | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `onValueChange` | 选中某项时的回调函数。 | function | No | All | Yes | +| `selectedValue` | 与其中某项的值相匹配的值。可以是字符串或整数。 | any | No | All | Yes | +| `style` | 应用于 Picker 视图的样式。 | pickerStyleType | No | All | Yes | +| `testID` | 用于在端到端测试中定位此视图。 | string | No | All | Yes | +| `enabled` | 如果设置为 false，选择器将被禁用，即用户将无法进行选择。 | boolean | No | Android, Web, Windows | Yes | +| `mode` | 在 Android 上，指定用户点击选择器时如何显示选项。 | enum('dialog', 'dropdown') | No | Android | No | +| `dropdownIconColor` | 在 Android 上，指定下拉三角形的颜色。 | ColorValue | No | Android | No | +| `dropdownIconRippleColor` | 在 Android 上，指定下拉三角形的波纹颜色。 | ColorValue | No | Android | No | +| `prompt` | 此选择器的提示字符串，在 Android 的 dialog 模式下用作对话框标题。 | string | No | Android | No | +| `itemStyle` | 应用于每个选项标签的样式。 | [text styles](https://reactnative.dev/docs/text-style-props) | No | iOS, Windows | partially | +| `numberOfLines` | 在 Android 和 iOS 上，用于在计算文本布局后用省略号截断文本。 | number | No | Android, iOS | No | +| `onBlur` | 当选择器失去焦点时的回调函数。 | function | No | Android | No | +| `onFocus` | 当选择器获得焦点时的回调函数。 | function | No | Android | No | +| `selectionColor` | 应用于选中指示器的颜色。 | ColorValue | No | iOS | Yes | +| `themeVariant` | 指定 iOS 上的主题变体（例如 'light' 或 'dark'）。 | enum('light', 'dark') | No | iOS | No | ### PickerItemProps -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|----------------------|----------------------------------------------------------------------------------------------------------|---------------|----------|----------|-------------------| -| `label` | Displayed value on the Picker Item. | string | Yes | All | Yes | -| `value` | Actual value on the Pickmodeler Item. | number,string | Yes | All | Yes | -| `color` | Displayed color on the Picker Item. | ColorValue | Yes | All | No | -| `fontFamily` | Displayed fontFamily on the Picker Item. | string | No | All | No | -| `style` | Style to apply to individual item labels. | ViewStyleProp | No | Android | No | -| `enabled` | If set to false, the specific item will be disabled, i.e. the user will not be able to make a selection. | boolean | No | Android | No | -| `contentDescription` | Sets the content description to the Picker Item. | string | No | Android | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `label` | 显示在 Picker 选项上的文字。 | string | Yes | All | Yes | +| `value` | Picker 选项的实际值。 | number,string | Yes | All | Yes | +| `color` | Picker 选项显示的颜色。 | ColorValue | No | All | No | +| `fontFamily` | Picker 选项显示的字体。 | string | No | All | No | +| `style` | 应用于单个选项标签的样式。 | ViewStyleProp | No | Android | No | +| `enabled` | 如果设置为 false，该特定选项将被禁用，即用户无法选中它。 | boolean | No | Android | No | +| `contentDescription` | 设置 Picker 选项的内容描述。 | string | No | Android | No | ## 静态方法 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|---------|---------------------------------|----------|----------|----------|-------------------| -| `blur` | Programmatically closes picker. | function | No | Android | No | -| `focus` | Programmatically opens picker. | function | No | Android | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `blur` | 以编程方式关闭选择器。 | function | No | Android | No | +| `focus` | 以编程方式打开选择器。 | function | No | Android | No | ## 遗留问题 @@ -306,4 +349,4 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-picker/picker/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/react-native-picker/picker/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-qr-decode-image-camera.md b/zh-cn/react-native-qr-decode-image-camera.md index 1ba1cc159d5a26143cee9937a3e6c852e9346a19..3b0249f6905acee40bcbddf38230d5b278706f83 100644 --- a/zh-cn/react-native-qr-decode-image-camera.md +++ b/zh-cn/react-native-qr-decode-image-camera.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-qr-decode-image-camera Releases](https://github.com/react-native-oh-library/react-native-qr-decode-image-camera/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.1.3 | [@react-native-oh-tpl/react-native-qr-decode-image-camera Releases](https://github.com/react-native-oh-library/react-native-qr-decode-image-camera/releases) | 0.72 | +| 1.2.0 | [@react-native-ohos/react-native-qr-decode-image-camera Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-qr-decode-image-camera) | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,19 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-qr-decode-image-camera +# 0.77 +npm install @react-native-ohos/react-native-qr-decode-image-camera ``` #### **yarn** ```bash +# 0.72 yarn add @react-native-oh-tpl/react-native-qr-decode-image-camera +# 0.77 +yarn add @react-native-ohos/react-native-qr-decode-image-camera ``` @@ -140,13 +153,15 @@ const styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] V1.2.0 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link -本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-vision-camera 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库鸿蒙侧实现依赖 react-native-vision-camera 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-vision-camera](/zh-cn/react-native-vision-camera.md)进行引入 +如未引入请参照[react-native-vision-camera 文档](/zh-cn/react-native-vision-camera.md)进行引入 ## 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 @@ -172,6 +187,7 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- 0.72 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -179,6 +195,14 @@ const styles = StyleSheet.create({ } ``` +- 0.77 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-qr-decode-image-camera": "file:../../node_modules/@react-native-ohos/react-native-qr-decode-image-camera/harmony/qr_decode_image_camera.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -199,7 +223,10 @@ ohpm install ```diff ... + // 0.72 + import {RNQrDecodeImageCameraPackage} from '@react-native-oh-tpl/react-native-qr-decode-image-camera/ts'; + // 0.77 ++ import {RNQrDecodeImageCameraPackage} from '@react-native-ohos/react-native-qr-decode-image-camera/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -215,7 +242,10 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ```diff ... + // 0.72 + import { NativeScan } from "@react-native-oh-tpl/react-native-qr-decode-image-camera" + // 0.77 ++ import { NativeScan } from "@react-native-ohos/react-native-qr-decode-image-camera" @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { @@ -231,7 +261,69 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... ``` -### 5.运行 +### 5.配置 CMakeLists 和引入 QrDecodeImageCameraPackage + +> [!TIP] 0.77 需要执行 + +打开 `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-qr-decode-image-camera/src/main/cpp" ./qr-decode-image-camera) + +# 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_qr_decode_image_camera) +# 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 "QrDecodeImageCameraPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 6.运行 点击右上角的 `sync` 按钮 @@ -248,9 +340,11 @@ ohpm install ### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +本文档内容基于以下版本验证通过： +1. RNOH：0.72.86; SDK：HarmonyOS 6.0.0.47 (API Version 20); IDE：DevEco Studio 6.0.0.858; ROM：6.0.0.107; +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; + -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-qr-decode-image-camera](https://github.com/react-native-oh-library/react-native-qr-decode-image-camera/releases) ## 静态方法 @@ -271,38 +365,38 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------ | ------------------------------------------------ | ------- | -------- | ----------- | ----------------- | -| isRepeatScan | whether to allow repeated scanning | boolean | no | iOS/Android | yes | -| zoom | Camera focal length range 0-1 | number | no | iOS/Android | no | -| flashMode | Turn on the flashlight | boolean | no | iOS/Android | yes | -| onRead | scan callback | funtion | yes | iOS/Android | yes | -| maskColor | mask layer color | string | no | iOS/Android | yes | -| borderColor | border color | string | no | iOS/Android | yes | -| cornerColor | Color of corner of scan frame | string | no | iOS/Android | yes | -| borderWidth | border width of scan frame | number | no | iOS/Android | yes | -| cornerBorderWidth | border width of scan frame corner | number | no | iOS/Android | yes | -| cornerBorderLength | width and height of the corner of the scan frame | number | no | iOS/Android | yes | -| rectHeight | Scan frame height | number | no | iOS/Android | yes | -| rectWidth | Scan Frame Width | number | no | iOS/Android | yes | -| finderX | scan frame X axis offset | number | no | iOS/Android | yes | -| finderY | scan frame Y axis offset | number | no | iOS/Android | yes | -| isCornerOffset | whether the corners are offset | boolean | no | iOS/Android | yes | -| cornerOffsetSize | offset | number | no | iOS/Android | yes | -| bottomHeight | Reserved height at the bottom | number | no | iOS/Android | yes | -| scanBarAnimateTime | scan line time | number | no | iOS/Android | yes | -| scanBarColor | scan line color | string | no | iOS/Android | yes | -| scanBarImage | scan line image | any | no | iOS/Android | yes | -| scanBarHeight | scan line height | number | no | iOS/Android | yes | -| scanBarMargin | scanline left and right margin | number | no | IOS/Android | yes | -| hintText | hintText | string | no | IOS/Android | yes | -| hintTextStyle | hint string style | object | no | iOS/Android | yes | -| hintTextPosition | hintTextPosition | number | no | iOS/Android | yes | -| renderTopView | render top View | funtion | no | iOS/Android | yes | -| renderBottomView | render bottom View | funtion | no | iOS/Android | yes | -| isShowScanBar | whether to show scan lines | boolean | no | iOS/Android | yes | -| topViewStyle | render top container style | object | no | iOS/Android | yes | -| bottomViewStyle | render bottom container style | object | no | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| isRepeatScan | 是否允许重复扫描 | boolean | no | iOS/Android | yes | +| zoom | 相机焦距范围 0-1 | number | no | iOS/Android | no | +| flashMode | 开启闪光灯 | boolean | no | iOS/Android | yes | +| onRead | 扫描回调 | funtion | yes | iOS/Android | yes | +| maskColor | 遮罩层颜色 | string | no | iOS/Android | yes | +| borderColor | 边框颜色 | string | no | iOS/Android | yes | +| cornerColor | 扫描框边角颜色 | string | no | iOS/Android | yes | +| borderWidth | 扫描框边框宽度 | number | no | iOS/Android | yes | +| cornerBorderWidth | 扫描框边角宽度 | number | no | iOS/Android | yes | +| cornerBorderLength | 扫描框边角的宽高 | number | no | iOS/Android | yes | +| rectHeight | 扫描框高度 | number | no | iOS/Android | yes | +| rectWidth | 扫描框宽度 | number | no | iOS/Android | yes | +| finderX | 扫描框 X 轴偏移量 | number | no | iOS/Android | yes | +| finderY | 扫描框 Y 轴偏移量 | number | no | iOS/Android | yes | +| isCornerOffset | 边角是否有偏移 | boolean | no | iOS/Android | yes | +| cornerOffsetSize | 偏移量 | number | no | iOS/Android | yes | +| bottomHeight | 底部预留高度 | number | no | iOS/Android | yes | +| scanBarAnimateTime | 扫描线动画时间 | number | no | iOS/Android | yes | +| scanBarColor | 扫描线颜色 | string | no | iOS/Android | yes | +| scanBarImage | 扫描线图片 | any | no | iOS/Android | yes | +| scanBarHeight | 扫描线高度 | number | no | iOS/Android | yes | +| scanBarMargin | 扫描线左右边距 | number | no | IOS/Android | yes | +| hintText | 提示文本 | string | no | IOS/Android | yes | +| hintTextStyle | 提示文本样式 | object | no | iOS/Android | yes | +| hintTextPosition | 提示文本位置 | number | no | iOS/Android | yes | +| renderTopView | 渲染顶部视图 | funtion | no | iOS/Android | yes | +| renderBottomView | 渲染底部视图 | funtion | no | iOS/Android | yes | +| isShowScanBar | 是否显示扫描线 | boolean | no | iOS/Android | yes | +| topViewStyle | 顶部容器样式 | object | no | iOS/Android | yes | +| bottomViewStyle | 底部容器样式 | object | no | iOS/Android | yes | ## 遗留问题 @@ -310,4 +404,4 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/deepanrajkumar/react-native-qr-decode-image-camera/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/deepanrajkumar/react-native-qr-decode-image-camera/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-ratings.md b/zh-cn/react-native-ratings.md index 01001d7d66c4b8b4ee58715d1bd22475dc229dfc..a5b14d4432707b14732034c3e12ab3e7379625a6 100644 --- a/zh-cn/react-native-ratings.md +++ b/zh-cn/react-native-ratings.md @@ -17,6 +17,10 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| :--- | :--- | +| 8.1.0 | 0.72/0.77 | + #### **npm** @@ -126,6 +130,7 @@ export function RatingsDemo () { 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.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +3. 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; ## 属性 @@ -136,24 +141,24 @@ export function RatingsDemo () { | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **type** | Choose one of the built-in types: star, rocket, bell, heart or use type custom to render a custom image (optional) | String | No | iOS/Android | Yes | -| **ratingImage** | Pass in a custom image source; use this along with type='custom' prop above (optional) | String | YES | iOS/Android | Yes | -| **ratingColor** | Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above (optional) | String | No | iOS/Android | Yes | -| **ratingBackgroundColor** | Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above (optional) | String | No | iOS/Android | Yes | -| **tintColor** | Color used to change the background of the rating icon (optional) | String | No | iOS/Android | Yes | -| **ratingCount** | The number of rating images to display (optional) | number | No | iOS/Android | Yes | -| **ratingTextColor** | Color used for the text labels | String | No | iOS/Android | Yes | -| **imageSize** | The size of each rating image (optional) | number | No | iOS/Android | Yes | -| **showRating** | Displays the Built-in Rating UI to show the rating value in real-time (optional) | boolean | No | iOS/Android | Yes | -| **readonly** | Whether the rating can be modiefied by the user | boolean | No | iOS/Android | Yes | -| **startingValue** | The initial rating to render | number | No | iOS/Android | Yes | -| **fractions** | The number of decimal places for the rating value; must be between 0 and 20 | number | No | iOS/Android | Yes | -| **minValue** | The minimum value the user can select | number | No | iOS/Android | Yes | -| **style** | Exposes style prop to add additonal styling to the container view (optional) | style | No | iOS/Android | Yes | -| **jumpValue** | The value to jump when rating value changes (if jumpValue === 0.5, rating value increases/decreases like 0, 0.5, 1.0, 1.5 ...). Default is 0 (not to jump) | number | No | iOS/Android | Yes | -| **onStartRating** | Callback method when the user starts rating. Gives you the start rating value as a whole number | function | No | iOS/Android | Yes | -| **onSwipeRating** | Callback method when the user is swiping. Gives you the current rating value as a whole number | function | No | iOS/Android | Yes | -| **onFinishRating** | Callback method when the user finishes rating. Gives you the final rating value as a whole number (required) | function | No | iOS/Android | Yes | +| **type** | 选择内置类型之一：star、rocket、bell、heart，或者使用 type='custom' 来渲染自定义图片（可选）。 | String | No | iOS/Android | Yes | +| **ratingImage** | 传入自定义图片资源；需配合上述 type='custom' 属性使用（可选）。 | String | No | iOS/Android | Yes | +| **ratingColor** | 传入评分图标的自定义填充颜色；需配合上述 type='custom' 属性使用（可选）。 | String | No | iOS/Android | Yes | +| **ratingBackgroundColor** | 传入评分图标的自定义背景填充颜色；需配合上述 type='custom' 属性使用（可选）。 | String | No | iOS/Android | Yes | +| **tintColor** | 用于改变评分图标背景的颜色（可选）。 | String | No | iOS/Android | Yes | +| **ratingCount** | 显示的评分图片数量（可选）。 | number | No | iOS/Android | Yes | +| **ratingTextColor** | 文本标签的颜色。 | String | No | iOS/Android | Yes | +| **imageSize** | 每个评分图片的大小（可选）。 | number | No | iOS/Android | Yes | +| **showRating** | 显示内置的评分 UI 以实时展示评分值（可选）。 | boolean | No | iOS/Android | Yes | +| **readonly** | 用户是否可以修改评分。 | boolean | No | iOS/Android | Yes | +| **startingValue** | 渲染时的初始评分。 | number | No | iOS/Android | Yes | +| **fractions** | 评分值的小数位数；必须在 0 到 20 之间。 | number | No | iOS/Android | Yes | +| **minValue** | 用户可以选择的最小值。 | number | No | iOS/Android | Yes | +| **style** | 暴露样式属性以向容器视图添加额外样式（可选）。 | style | No | iOS/Android | Yes | +| **jumpValue** | 评分值变化时的跳跃值（如果 jumpValue === 0.5，评分值将按 0, 0.5, 1.0, 1.5... 增减）。默认为 0（不跳跃）。 | number | No | iOS/Android | Yes | +| **onStartRating** | 用户开始评分时的回调方法。提供整数形式的开始评分值。 | function | No | iOS/Android | Yes | +| **onSwipeRating** | 用户滑动时的回调方法。提供整数形式的当前评分值。 | function | No | iOS/Android | Yes | +| **onFinishRating** | 用户完成评分时的回调方法。提供整数形式的最终评分值（必填）。 | function | Yes | iOS/Android | Yes | ## **API（AirbnbRating）** > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -162,21 +167,21 @@ export function RatingsDemo () { | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **defaultRating** | Initial value for the rating | number | No | iOS/Android | Yes | -| **reviews** | Labels to show when each value is tapped e.g. If the first star is tapped, then value in index 0 will be used as the label | string | No | iOS/Android | Yes | -| **count** | Total number of ratings to display | number | No | iOS/Android | Yes | -| **selectedColor** | Pass in a custom fill-color for the rating icon | string | No | iOS/Android | Yes | -| **unSelectedColor** | Pass in a custom not fill-color for the rating icon | string | No | iOS/Android | Yes | -| **reviewColor** | Pass in a custom text color for the review text | string | No | iOS/Android | Yes | -| **size** | The size of each rating image (optional) | number | No | iOS/Android | Yes | -| **reviewSize** | Pass in a custom font size for the review text | number | No | iOS/Android | Yes | -| **showRating** | Determines if to show the reviews above the rating | boolean | No | iOS/Android | Yes | -| **isDisabled** | Whether the rating can be modiefied by the user | boolean | No | iOS/Android | Yes | -| **onFinishRating** | Callback method when the user finishes rating. Gives you the final rating value as a whole number | function | No | iOS/Android | Yes | -| **starContainerStyle** | Custom styles applied to the star container | object | No | iOS/Android | Yes | -| **ratingContainerStyle** | Custom styles applied to the rating container | object | No | iOS/Android | Yes | -| **starImage** | Pass in a custom base image source (optional) | string | No | iOS/Android | Yes | -| **starStyle** | Custom styles applied to the star (optional) | object | No | iOS/Android | Yes | +| **defaultRating** | 评分的初始值。 | number | No | iOS/Android | Yes | +| **reviews** | 点击每个值时显示的标签，例如：如果点击了第一颗星，则使用索引 0 处的值作为标签。 | string | No | iOS/Android | Yes | +| **count** | 显示的评分总数。 | number | No | iOS/Android | Yes | +| **selectedColor** | 传入评分图标的自定义填充颜色。 | string | No | iOS/Android | Yes | +| **unSelectedColor** | 传入评分图标的自定义未填充颜色。 | string | No | iOS/Android | Yes | +| **reviewColor** | 传入评分文本的自定义颜色。 | string | No | iOS/Android | Yes | +| **size** | 每个评分图片的大小（可选）。 | number | No | iOS/Android | Yes | +| **reviewSize** | 传入评论文本的自定义字体大小。 | number | No | iOS/Android | Yes | +| **showRating** | 决定是否在评分上方显示评论。 | boolean | No | iOS/Android | Yes | +| **isDisabled** | 用户是否可以修改评分。 | boolean | No | iOS/Android | Yes | +| **onFinishRating** | 用户完成评分时的回调方法。提供整数形式的最终评分值。 | function | No | iOS/Android | Yes | +| **starContainerStyle** | 应用于星星容器的自定义样式。 | object | No | iOS/Android | Yes | +| **ratingContainerStyle** | 应用于评分容器的自定义样式。 | object | No | iOS/Android | Yes | +| **starImage** | 传入自定义基础图片资源（可选）。 | string | No | iOS/Android | Yes | +| **starStyle** | 应用于星星的自定义样式（可选）。 | object | No | iOS/Android | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-shadow-2.md b/zh-cn/react-native-shadow-2.md index f8789e64e7924312e18723b2f7e01e055069ff7b..070f15695e966d6549cce881e9553359380411e2 100644 --- a/zh-cn/react-native-shadow-2.md +++ b/zh-cn/react-native-shadow-2.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 7.0.8 | 0.72 | +| 7.1.1 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# 0.72 npm install react-native-shadow-2@7.0.8 + +# 0.77 +npm install react-native-shadow-2@7.1.1 ``` #### **yarn** ```bash +# 0.72 yarn add react-native-shadow-2@7.0.8 + +# 0.77 +yarn add react-native-shadow-2@7.1.1 ``` @@ -173,9 +186,9 @@ const styles = StyleSheet.create({ ## Link -本库HarmonyOS侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在HarmonyOS工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库HarmonyOS侧实现依赖 react-native-svg 的原生端代码，如已在HarmonyOS工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](/zh-cn/react-native-svg-capi.md#link)进行引入 +如未引入请参照[react-native-svg 文档](/zh-cn/react-native-svg-capi.md#link)进行引入 ## 约束与限制 @@ -184,6 +197,7 @@ const styles = StyleSheet.create({ 本文档内容基于以下版本验证通过： 1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25 (API Version 12 Canary4); IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; +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; ## 属性 @@ -191,20 +205,20 @@ const styles = StyleSheet.create({ > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | ----------------- | -| startColor | The initial gradient color of the shadow. | string | no | All | yes | -| endColor | The final gradient color of the shadow. | string | no | All | yes | -| distance | How far the shadow goes. | number | no | All | yes | -| offset | Moves the shadow. Negative x moves it left/start, negative y moves it up. Accepts 'x%' values. Defining this will default paintInside to true, as it's the usual desired behaviour. | [x: string \| number, y: string \| number] | no | All | yes | -| paintInside | Apply the shadow below/inside the content. startColor is used as fill color, without a gradient. Useful when using offset or if your child has some transparency. | boolean | no | All | yes | -| sides | The sides that will have their shadows drawn. Doesn't include corners. Undefined sides fallbacks to true. | Record<'start' \| 'end' \| 'top' \| 'bottom', boolean> | no | All | yes | -| corners | The corners that will have their shadows drawn. Undefined corners fallbacks to true. | Record<'topStart' \| 'topEnd' \| 'bottomStart' \| 'bottomEnd', boolean> | no | Android | yes | -| style | The style of the View that wraps your children. | StyleProp | no | All | yes | -| containerStyle | The style of the View that wraps the Shadow and your children. Useful for margins. | StyleProp | no | All | yes | -| stretch | Make your children ocuppy all available horizontal space. | boolean | no | All | yes | -| safeRender | Won't use the relative sizing and positioning on the 1st render but on the following renders with the exact onLayout sizes. Useful if dealing with radii greater than the sides sizes (like a circle) to avoid visual artifacts on the 1st render. | boolean | no | All | yes | -| disabled | Disables the Shadow. Useful for easily reusing components as sometimes shadows are not desired. containerStyle and style are still applied. | boolean | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| startColor | 阴影的起始渐变色。 | string | no | All | yes | +| endColor | 阴影的结束渐变色。 | string | no | All | yes | +| distance | 阴影的延伸距离。 | number | no | All | yes | +| offset | 移动阴影。负x值使其向左/起点移动，负y值使其向上移动。接受 'x%' 格式的百分比值。设置此属性会将 `paintInside` 的默认值设为 true，因为这通常是期望的行为。 | [x: string \| number, y: string \| number] | no | All | yes | +| paintInside | 将阴影应用于内容的下方/内部。`startColor` 将被用作无渐变的填充色。当使用 `offset` 属性或子组件包含透明区域时，此属性很有用。 | boolean | no | All | yes | +| sides | 指定将要绘制阴影的边。不包括角落。未定义的边将默认设为 true。 | Record<'start' \| 'end' \| 'top' \| 'bottom', boolean> | no | All | yes | +| corners | 指定将要绘制阴影的角。未定义的角将默认设为 true。 | Record<'topStart' \| 'topEnd' \| 'bottomStart' \| 'bottomEnd', boolean> | no | Android | yes | +| style | 包裹子组件的视图（View）的样式。 | StyleProp | no | All | yes | +| containerStyle | 包裹阴影和子组件的视图的样式。对于设置外边距（margins）很有用。 | StyleProp | no | All | yes | +| stretch | 使子组件占据所有可用的水平空间。 | boolean | no | All | yes | +| safeRender | 在首次渲染时不使用相对尺寸和定位，而是在后续渲染中采用 `onLayout` 返回的精确尺寸。当处理半径大于边尺寸（如圆形）的场景时，此属性可用于避免首次渲染时出现视觉瑕疵。 | boolean | no | All | yes | +| disabled | 禁用阴影效果。当某些场景下不需要阴影时，此属性便于组件的复用。`containerStyle` 和 `style` 属性仍然会生效。 | boolean | no | All | yes | ## 遗留问题 @@ -216,4 +230,4 @@ const styles = StyleSheet.create({ ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/SrBrahma/react-native-shadow-2/blob/main/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/SrBrahma/react-native-shadow-2/blob/main/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-vector-icons.md b/zh-cn/react-native-vector-icons.md index 521336226d0a47890545b41423f5b81d696eb42d..e3e26835005a3e5f0e3612acb2a8af73b8350c37 100644 --- a/zh-cn/react-native-vector-icons.md +++ b/zh-cn/react-native-vector-icons.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 10.0.3 | 0.72 | +| 10.2.0 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# 0.72 npm install react-native-vector-icons@10.0.3 + +# 0.77 +npm install react-native-vector-icons@10.2.0 ``` #### **yarn** ```bash +# 0.72 yarn add react-native-vector-icons@10.0.3 + +# 0.77 +yarn add react-native-vector-icons@10.2.0 ``` @@ -357,6 +370,7 @@ RNApp({ 本文档内容基于以下版本验证通过： 1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; 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; ## 遗留问题 @@ -366,4 +380,4 @@ RNApp({ ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/oblador/react-native-vector-icons/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/oblador/react-native-vector-icons/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file