diff --git a/zh-cn/react-native-SmartRefreshLayout.md b/zh-cn/react-native-SmartRefreshLayout.md index f40252fd8ea5a37ac07ce942abddb2478a69c57e..105a396f3257360d5eade462b6a0d53eb19bd0f6 100644 --- a/zh-cn/react-native-SmartRefreshLayout.md +++ b/zh-cn/react-native-SmartRefreshLayout.md @@ -1,5 +1,5 @@ -> 模板版本:v0.1.3 +> 模板版本:v0.2.2

react-native-SmartRefreshLayout

@@ -13,7 +13,7 @@

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-smartrefreshlayout) +> [!Tip] [Github 地址](https://github.com/react-native-oh-library/react-native-smartrefreshlayout) ## 安装与使用 @@ -147,7 +147,7 @@ const App = () => { setText1("时间:" + new Date().getTime() + "onRefresh触发刷新"); }} HeaderComponent={ - + {text} } @@ -183,6 +183,16 @@ export default App; 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +### 在工程根目录的 `oh-package.json` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` ### 引入原生端代码 目前有两种方法: @@ -190,7 +200,7 @@ export default App; 1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); 2. 直接链接源码。 -方法一:通过 har 包引入 +方法一:通过 har 包引入 (推荐) > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 @@ -200,7 +210,7 @@ export default App; "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "rnoh-smart-refresh-layout": "file:../../node_modules/@react-native-oh-tpl/react-native-smartrefreshlayout/harmony/smart_refresh_layout.har" + "@react-native-oh-tpl/react-native-smartrefreshlayout": "file:../../node_modules/@react-native-oh-tpl/react-native-smartrefreshlayout/harmony/smart_refresh_layout.har" } ``` @@ -224,16 +234,23 @@ ohpm install ```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(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +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: add_package_subdirectories +# RNOH_END: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-smart-refresh-layout/src/main/cpp" ./smart-refresh-layout) -# RNOH_END: add_package_subdirectories ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-smartrefreshlayout/src/main/cpp" ./smart-refresh-layout) +# RNOH_END: manual_package_linking_1 add_library(rnoh_app SHARED "./PackageProvider.cpp" @@ -242,10 +259,10 @@ add_library(rnoh_app SHARED target_link_libraries(rnoh_app PUBLIC rnoh) -# RNOH_BEGIN: link_packages +# RNOH_BEGIN: manual_package_linking_2 target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) + target_link_libraries(rnoh_app PUBLIC rnoh_smart_refresh_layout) -# RNOH_END: link_packages +# RNOH_BEGIN: manual_package_linking_2 ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: @@ -265,47 +282,20 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 在 ArkTs 侧引入 SmartRefresh 组件 +### 在 ArkTs 侧引入 SmartRefreshPackage(版本>=0.6.7-0.2.9) -找到 **function buildCustomComponent()**,一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`,添加: +打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: ```diff ... -import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" -import { createRNPackages } from '../RNPackagesFactory' -+ import { SmartRefreshControl,SMART_REFRESH_CONTROL_TYPE ,ANY_HEADER_TYPE,RNCAnyHeader,DEFAULT_HEADER_TYPE,RNCDefaultHeader} from "rnoh-smart-refresh-layout" - -@Builder -function buildCustomComponent(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnComponentContext, - tag: ctx.tag, - buildCustomComponent: buildCustomComponent - }) - } -+ else if (ctx.componentName === SMART_REFRESH_CONTROL_TYPE){ -+ SmartRefreshControl({ -+ ctx: ctx.rnComponentContext, -+ tag: ctx.tag, -+ buildCustomComponent: buildCustomComponent -+ }) -+ } else if (ctx.componentName === ANY_HEADER_TYPE){ -+ RNCAnyHeader({ -+ ctx: ctx.rnComponentContext, -+ tag: ctx.tag, -+ buildCustomComponent: buildCustomComponent -+ }) -+ } else if (ctx.componentName === DEFAULT_HEADER_TYPE) { -+ RNCDefaultHeader({ -+ ctx: ctx.rnComponentContext, -+ tag: ctx.tag, -+ buildCustomComponent: buildCustomComponent -+ }) -+ } - ... ++ import { SmartRefreshPackage } from '@react-native-oh-tpl/react-native-smartrefreshlayout/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SmartRefreshPackage(ctx) + ]; } -... ``` ### 运行 @@ -321,7 +311,9 @@ ohpm install 然后编译、运行即可。 -## 兼容性 +## 约束与限制 + +### 兼容性 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 @@ -339,53 +331,63 @@ ohpm install | --------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------- | -------- | ----------------- | | `HeaderComponent` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element | No | Android | Yes | | `renderHeader` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element/func | No | Android | No | -| `enableRefresh` | 是否启用下拉刷新,默认为 true | boolean | No | Android | No | +| `enableRefresh` | 是否启用下拉刷新,默认为 true | boolean | No | Android | Yes | | `headerHeight` | 设定 header 的高度 | number | No | Android | Yes | | `primaryColor` | 设置刷新组件的主调色 | string | No | Android | Yes | -| `autoRefresh` | 是否自动刷新 | object:{refresh:boolean, time:number} | No | Android | No | +| `autoRefresh` | 是否自动刷新 | object:{refresh:boolean, time:number} | No | Android | Yes | | `pureScroll` | 是否启用纯滚动 | boolean | No | Android | No | | `overScrollBounce` | 是否启用越界拖动,类似 IOS 样式。 | boolean | No | Android | No | | `dragRate` | 设置组件下拉高度与手指真实下拉高度的比值,默认为 0.5。 | number | No | Android | No | | `maxDragRate` | 设置最大显示下拉高度与 header 标准高度的比值,默认为 2.0。 | number | No | Android | No | -| `onPullDownToRefresh` | 可下拉刷新时触发 | function | No | Android | No | -| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | No | +| `onPullDownToRefresh` | 可下拉刷新时触发 | function | No | Android | Yes | +| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | Yes | | `onRefresh` | 刷新时触发 | function | No | Android | Yes | -| `onHeaderReleased` | Header 释放时触发 | function | No | Android | No | +| `onHeaderReleased` | Header 释放时触发 | function | No | Android | Yes | | `onHeaderMoving` | header 移动过程中触发,包括下拉过程和释放过程。 | ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; | No | Android | Yes | -| `finishRefresh` | 完成刷新 | Methods | No | Android | Yes | + **组件 AnyHeader** 仅组件支持渲染,在 RNOH0.72.10 版本中需要给 List 类型子组件添加 bounces = {false}属性,否则无法触发本组件的下拉。(0.72.11 版本已解决) -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | HarmonyOS 支持 | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ------------------------ | ------ | -------- | -------- | -------- | -| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 | +| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | No | **组件 DefaultHeader/ClassicsHeader** -当前组件不支持 +当前组件支持 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | HarmonyOS 支持 | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ------------------------ | ------ | -------- | -------- | -------- | -| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 | -| `accentColor` | 刷新组件 Header 的强调色 | string | No | Android | 不支持 | +| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | No | +| `accentColor` | 刷新组件 Header 的强调色 | string | No | Android | No | **组件 StoreHouseHeader** 当前组件不支持 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | HarmonyOS 支持 | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------- | --------------------------- | ------ | -------- | -------- | -------- | -| `text` | StoreHouseHeader 的文字 | string | No | Android | 不支持 | -| `textColor` | StoreHouseHeader 的文字颜色 | string | No | Android | 不支持 | -| `lineWidth` | StoreHouseHeader 的文字线宽 | number | No | Android | 不支持 | +| `text` | StoreHouseHeader 的文字 | string | No | Android | No | +| `textColor` | StoreHouseHeader 的文字颜色 | string | No | Android | No | +| `lineWidth` | StoreHouseHeader 的文字线宽 | number | No | Android | No | --- +## 静态方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| finishRefresh | complete refresh | function | No | Android | Yes | + ## 遗留问题 -- [ ] SmartRefreshLayout 包裹 FlatList 组件,多次下拉刷新,item 会回弹。[Issue #11 ](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/issues/11) +- [ ] SmartRefreshLayout 包裹 FlatList 组件,多次下拉刷新,item 会回弹:[Issue #11 ](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/issues/11) ## 其他 diff --git a/zh-cn/react-native-reanimated.md b/zh-cn/react-native-reanimated.md index 3dead397f6e6473e9141a06c1d1bea17b275dc7a..881e01f1c086c76e46141e06b737089c976a9a49 100644 --- a/zh-cn/react-native-reanimated.md +++ b/zh-cn/react-native-reanimated.md @@ -1,5 +1,5 @@ -> 模板版本:v0.1.3 +> 模板版本:v0.2.2

react-native-reanimated

@@ -116,7 +116,7 @@ export default function App() { 1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); 2. 直接链接源码。 -方法一:通过 har 包引入 +方法一:通过 har 包引入(推荐) > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 @@ -126,7 +126,7 @@ export default function App() { "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - "rnoh-reanimated": "file:../../node_modules/@react-native-oh-tpl/react-native-reanimated/harmony/reanimated.har" + "@react-native-oh-tpl/react-native-reanimated": "file:../../node_modules/@react-native-oh-tpl/react-native-reanimated/harmony/reanimated.har" } ``` @@ -151,15 +151,16 @@ ohpm install project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") ++ set(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") add_subdirectory("${RNOH_CPP_DIR}" ./rn) -# RNOH_BEGIN: add_package_subdirectories +# RNOH_END: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-reanimated/src/main/cpp" ./reanimated) -# RNOH_END: add_package_subdirectories ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-reanimated/src/main/cpp" ./reanimated) +# RNOH_END: manual_package_linking_1 add_library(rnoh_app SHARED "./PackageProvider.cpp" @@ -168,10 +169,10 @@ add_library(rnoh_app SHARED target_link_libraries(rnoh_app PUBLIC rnoh) -# RNOH_BEGIN: link_packages +# RNOH_BEGIN: manual_package_linking_2 target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) + target_link_libraries(rnoh_app PUBLIC rnoh_reanimated) -# RNOH_END: link_packages +# RNOH_BEGIN: manual_package_linking_2 ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: @@ -197,7 +198,7 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... -+ import { ReanimatedPackage } from 'rnoh-reanimated/ts'; ++ import { ReanimatedPackage } from '@react-native-oh-tpl/react-native-reanimated/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -224,15 +225,9 @@ ohpm install ### 兼容性 -> [!WARNING] 本库的动画功能尚未实现,请关注之后发布的版本。 +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -本文档内容基于以下版本验证通过: - -1. RNOH:0.72.11; SDK:OpenHarmony(api11) 4.1.0.53; IDE:DevEco Studio 4.1.3.412; ROM:2.0.0.52; -2. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.58; -3. 2. RNOH:0.72.20-CAPI; SDK:HarmonyOS NEXT Developer Preview2; IDE:DevEco Studio 4.1.3.700; ROM:3.0.0.19; - -详情见 [react-native-reanimated 源库地址](https://github.com/software-mansion/react-native-reanimated) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-harmony-reanimated Releases](https://github.com/react-native-oh-library/react-native-harmony-reanimated/releases) ## API