From b49ed32d91ca71db232913abad37eca81107fd86 Mon Sep 17 00:00:00 2001 From: tangshutong Date: Fri, 12 Dec 2025 10:08:23 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E8=BF=81=E7=A7=BB?= =?UTF-8?q?=E5=A3=B0=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: tangshutong --- README.md | 20 +-- doc/en.md | 373 +++++++++++++++++++++++++++++++++++++++++++++++++++ doc/zh-cn.md | 373 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 756 insertions(+), 10 deletions(-) create mode 100644 doc/en.md create mode 100644 doc/zh-cn.md diff --git a/README.md b/README.md index 90cf437..b61a0ee 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ -# @react-native-oh-tpl/react-native-spring-scrollview +# 迁移声明 -This project is based on [react-native-spring-scrollview](https://github.com/bolan9999/react-native-spring-scrollview) +- 本仓库已迁移至 GitCode：[OpenHarmony-SIG/rntpc_react-native-spring-scrollview](https://gitcode.com/openharmony-sig/rntpc_react-native-spring-scrollview)。 +- 包名已更改为 `@react-native-ohos/react-native-spring-scrollview`，支持直接从 npm 下载。 +- 更多详情请查阅新仓库的 README 文件。 +- 本仓库旧版本的文档已归档：[链接](/doc/zh-cn.md) -## Documentation +# Migration Announcement -- [中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-spring-scrollview.md) - -- [English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-spring-scrollview.md) - -## License - -This library is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-spring-scrollview/blob/sig/LICENSE) +- This repository has been migrated to GitCode：[OpenHarmony-SIG/rntpc_react-native-spring-scrollview](https://gitcode.com/openharmony-sig/rntpc_react-native-spring-scrollview) +- The package name has been changed to `@react-native-ohos/react-native-spring-scrollview` and is now available for direct download from npm. +- For more details, please refer to the README in the new repository. +- Archived documentation for versions in this repository can be found here: [Link](/doc/en.md) diff --git a/doc/en.md b/doc/en.md new file mode 100644 index 0000000..04084a6 --- /dev/null +++ b/doc/en.md @@ -0,0 +1,373 @@ +> Template version: v0.2.2 + +

+

react-native-spring-scrollview

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-spring-scrollview) + +## Installation and Usage + +Find the matching version information in the release address of a third-party library:[@react-native-oh-tpl/react-native-spring-scrollview Releases](https://github.com/react-native-oh-library/react-native-spring-scrollview/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: + + + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-spring-scrollview +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-spring-scrollview +``` + + + +The following code shows the basic use scenario of the repository: + +> [!WARNING] The name of the imported repository remains unchanged. + +```js +import React from 'react'; +import { + StyleSheet, + Text, + TouchableOpacity, + View, + Platform, + Animated +} from 'react-native'; +import {SpringScrollView} from 'react-native-spring-scrollview'; +export default class ScrollToAndOnScrollExample extends React.Component { + _contentCount = 20; + _scrollView; + render() { + const arr = []; + for (let i = 0; i < this._contentCount; ++i) arr.push(i); + return ( + + + Tap to ScrollTo y=200 + + + scroll + + + scrollToBegin + + + scrollToEnd + + (this._scrollView = ref)} + onTouchBegin={this._onTouchBegin} + onTouchEnd={this._onTouchEnd} + onMomentumScrollBegin={this.onMomentumScrollBegin} + onMomentumScrollEnd={this._onMomentumScrollEnd} + onScrollBeginDrag={this._onScrollBeginDrag} + onSizeChange={this._onSizeChange} + onContentSizeChange={this._onContentSizeChange} + onScroll={this._onScroll} + > + {arr.map((i, index) => ( + + Scroll and Look up the console log to check if + 'onScroll','onTouchBegin','onTouchEnd','onMomentumScrollBegin' and + 'onMomentumScrollEnd' work well! + + ))} + + + ); + } + _onScroll = offset => { + console.log("onScroll", offset.nativeEvent); + }; + _onSizeChange= (wh) => { + console.log('onSizeChange:'+JSON.stringify(wh)); + }; + _onContentSizeChange= (wh) => { + console.log('onContentSizeChange:'+JSON.stringify(wh)); + }; + _onNativeContentOffsetExtract = () => { + console.log('onNativeContentOffsetExtract'); + }; + _onScrollBeginDrag = () => { + console.log('onScrollBeginDrag'); + }; + _scroll = () => { + console.log('scroll'); + if (this._scrollView) { + this._scrollView + .scroll({x: 0, y: 200}); + } + }; + _scrollTo = () => { + console.log('scrollTo'); + if (this._scrollView) { + this._scrollView + .scrollTo({x: 0, y: 200}) + .then(() => console.log('ScrollTo has finished')); + } + }; + _scrollToBegin = () => { + console.log('scrollToBegin'); + if (this._scrollView) { + this._scrollView.scrollToBegin(true); + } + }; + _scrollToEnd = () => { + console.log('scrollToEnd'); + if (this._scrollView) { + this._scrollView.scrollToEnd(true); + } + }; + _onTouchBegin = () => { + console.log('onTouchBegin'); + }; + _onTouchEnd = () => { + console.log('onTouchEnd'); + }; + onMomentumScrollBegin = () => { + console.log('onMomentumScrollBegin'); + }; + _onMomentumScrollEnd = () => { + console.log('onMomentumScrollEnd'); + }; +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + scrollTo: { + marginTop: Platform.OS === 'ios' ? 20 : 0, + backgroundColor: 'gray', + zIndex: 100, + height: 50, + justifyContent: 'center', + alignItems: 'center', + }, + text: { + fontSize: 16, + margin: 20, + }, +}); +``` + +## Link + +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. + +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. + +The implementation of this library depends on the native code of @react-native-oh-tpl/lottie-react-native, @react-native-oh-tpl/async-storage. If you have already included this library in your HarmonyOS project, you do not need to include it again. You can skip this section and use the library directly. + +If you have not included it, please refer to the [Linking section of the @react-native-oh-tpl/lottie-react-native](/zh-cn/lottie-react-native.md#link), [Linking section of the @react-native-oh-tpl/async-storage](/zh-cn/react-native-async-storage-async-storage.md#link) + +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2. Introducing Native Code + +Currently, two methods are available: + + +Method 1 (recommended): Use the HAR file. + +> [!TIP] The HAR file is stored in the `harmony` directory in the installation path of the third-party library. + +Open `entry/oh-package.json5` file and add the following dependencies: + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-spring-scrollview": "file:../../node_modules/@react-native-oh-tpl/react-native-spring-scrollview/harmony/spring_scrollview.har", + } +``` + +Click the `sync` button in the upper right corner. + +Alternatively, run the following instruction on the terminal: + +```bash +cd entry +ohpm install +``` + +Method 2: Directly link to the source code. + +> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md). + +### 3. Configuring CMakeLists and Introducing SpringScrollViewPackge + +Open `entry/src/main/cpp/CMakeLists.txt` and add the following code: + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-spring-scrollview/src/main/cpp" ./spring_scrollview) +# 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_spring_scrollview) +# RNOH_END: manual_package_linking_2 +``` + +Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code: + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "SpringScrollViewPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4. Introducing SpringScrollViewPackage to ArkTS + +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: + +```diff + ... ++ import {SpringScrollViewPackage} from '@react-native-oh-tpl/react-native-spring-scrollview/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SpringScrollViewPackage(ctx), + ]; +} +``` + +### 5. Running + +Click the `sync` button in the upper right corner. + +Alternatively, run the following instruction on the terminal: + +```bash +cd entry +ohpm install +``` + +Then build and run the code. + +## 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. + +Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-spring-scrollview Releases](https://github.com/react-native-oh-library/react-native-spring-scrollview/releases) + + +## Properties + +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. + +> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| contentStyle | set content style | ViewStyle | no | iOS/Android | yes | +| bounces | Bounces if the content offset is out of the content view. It won't be bounces on the horizontal direction if the content view is not wider than the wrapper view although bounces is true. But it will on the vertical direction. | boolean | no | iOS/Android | yes | +| scrollEnabled | scrollEnabled | boolean | no | iOS/Android | yes | +| directionalLockEnabled | When true, the SpringScrollView will try to lock to only vertical or horizontal scrolling while dragging. | boolean | no | iOS/Android | yes | +| initialContentOffset | initial content offset. Only works when initiation. | Offset | no | iOS/Android | yes | +| showsVerticalScrollIndicator | showsVerticalScrollIndicator | boolean | no | iOS/Android | no | +| showsHorizontalScrollIndicator | showsHorizontalScrollIndicator | boolean | no | iOS/Android | no | +| refreshHeader | refresh header | React.ComponentClass | no | iOS/Android | yes | +| loadingFooter | loading header | React.ComponentClass | no | iOS/Android | yes | +| onRefresh | he callback when refreshing. When this props is configured, a refresh header will be add on the top of the SpringScrollView | ()=>any | no | iOS/Android | yes | +| onLoading() | The callback of loading. If set this prop, a loading footer will add to the botom of the SpringScrollView | ()=>any | no | iOS/Android | yes | +| allLoaded | Whether the data is all loaded. | boolean | no | iOS/Android | yes | +| textInputRefs | text input | any[] | no | iOS/Android | yes | +| inverted | inverted. It is a service for LargeList. | boolean | no | iOS/Android | yes | +| inputToolBarHeight | set height of the input toolbar | number | no | iOS/Android | yes | +| dragToHideKeyboard | hide the currently displayed keyboard | boolean | no | iOS/Android | yes | +| onTouchBegin() | begin touch | ()=>any | no | iOS/Android | yes | +| onTouchEnd() | touch finished | ()=>any | no | iOS/Android | yes | +| beginRefresh() | If you want to begin refreshing programally without finger draging, call this method after initialized. | Promise | no | iOS/Android | yes | +| endRefresh() | End the refreshing status. | void | no | iOS/Android | yes | +| endLoading() | End the loading status. | void | no | iOS/Android | yes | +| scrollTo() | animate scroll to a specific position | Promise | no | iOS/Android | yes | +| scroll() | scroll animation to a specific position | Promise | no | iOS/Android | yes | +| scrollToBegin() | scroll begin | Promise | no | iOS/Android | yes | +| scrollToEnd() | scroll end | Promise | no | iOS/Android | yes | +| onScroll() | scroll | (evt: ScrollEvent) => any | no | iOS/Android | yes | +| onNativeContentOffsetExtract | calculate content offset | NativeContentOffset | no | iOS/Android | yes | +| onScrollBeginDrag() | an event that is triggered when the user starts dragging (scrolling) content. | ()=>any | no | iOS/Android | yes | +| onMomentumScrollBegin() | When the user scrolls content and the momentum scroll animation begins, it triggers an event. | ()=>any | no | iOS/Android | yes | +| onMomentumScrollEnd() | When the user scrolls content and the momentum scroll animation ends, it triggers an event. | ()=>any | no | iOS/Android | yes | +| onSizeChange | The callback when the wrapper view size changed. | (size: Size) => any | no | iOS/Android | yes | +| onContentSizeChange | The callback when the content view size changed. | (size: Size) => any | no | iOS/Android | yes | + +## Known Issues + +- [ ] showsVerticalScrollIndicator is not surported in harmony [issue#3](https://github.com/react-native-oh-library/react-native-spring-scrollview/issues/3) +- [ ] showsHorizontalScrollIndicator is not surported in harmony [issue#4](https://github.com/react-native-oh-library/react-native-spring-scrollview/issues/4) + +## Others + +## License + +This project is licensed under [The MIT License (MIT)](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/LICENSE). diff --git a/doc/zh-cn.md b/doc/zh-cn.md new file mode 100644 index 0000000..2c35a74 --- /dev/null +++ b/doc/zh-cn.md @@ -0,0 +1,373 @@ +> 模板版本：v0.2.2 + +

+

react-native-spring-scrollview

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-spring-scrollview) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-spring-scrollview Releases](https://github.com/react-native-oh-library/react-native-spring-scrollview/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-spring-scrollview +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-spring-scrollview +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React from 'react'; +import { + StyleSheet, + Text, + TouchableOpacity, + View, + Platform, + Animated +} from 'react-native'; +import {SpringScrollView} from 'react-native-spring-scrollview'; +export default class ScrollToAndOnScrollExample extends React.Component { + _contentCount = 20; + _scrollView; + render() { + const arr = []; + for (let i = 0; i < this._contentCount; ++i) arr.push(i); + return ( + + + Tap to ScrollTo y=200 + + + scroll + + + scrollToBegin + + + scrollToEnd + + (this._scrollView = ref)} + onTouchBegin={this._onTouchBegin} + onTouchEnd={this._onTouchEnd} + onMomentumScrollBegin={this.onMomentumScrollBegin} + onMomentumScrollEnd={this._onMomentumScrollEnd} + onScrollBeginDrag={this._onScrollBeginDrag} + onSizeChange={this._onSizeChange} + onContentSizeChange={this._onContentSizeChange} + onScroll={this._onScroll} + > + {arr.map((i, index) => ( + + Scroll and Look up the console log to check if + 'onScroll','onTouchBegin','onTouchEnd','onMomentumScrollBegin' and + 'onMomentumScrollEnd' work well! + + ))} + + + ); + } + _onScroll = offset => { + console.log("onScroll", offset.nativeEvent); + }; + _onSizeChange= (wh) => { + console.log('onSizeChange:'+JSON.stringify(wh)); + }; + _onContentSizeChange= (wh) => { + console.log('onContentSizeChange:'+JSON.stringify(wh)); + }; + _onNativeContentOffsetExtract = () => { + console.log('onNativeContentOffsetExtract'); + }; + _onScrollBeginDrag = () => { + console.log('onScrollBeginDrag'); + }; + _scroll = () => { + console.log('scroll'); + if (this._scrollView) { + this._scrollView + .scroll({x: 0, y: 200}); + } + }; + _scrollTo = () => { + console.log('scrollTo'); + if (this._scrollView) { + this._scrollView + .scrollTo({x: 0, y: 200}) + .then(() => console.log('ScrollTo has finished')); + } + }; + _scrollToBegin = () => { + console.log('scrollToBegin'); + if (this._scrollView) { + this._scrollView.scrollToBegin(true); + } + }; + _scrollToEnd = () => { + console.log('scrollToEnd'); + if (this._scrollView) { + this._scrollView.scrollToEnd(true); + } + }; + _onTouchBegin = () => { + console.log('onTouchBegin'); + }; + _onTouchEnd = () => { + console.log('onTouchEnd'); + }; + onMomentumScrollBegin = () => { + console.log('onMomentumScrollBegin'); + }; + _onMomentumScrollEnd = () => { + console.log('onMomentumScrollEnd'); + }; +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + scrollTo: { + marginTop: Platform.OS === 'ios' ? 20 : 0, + backgroundColor: 'gray', + zIndex: 100, + height: 50, + justifyContent: 'center', + alignItems: 'center', + }, + text: { + fontSize: 16, + margin: 20, + }, +}); +``` + +## Link + +目前HarmonyOS暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的HarmonyOS工程 `harmony` + +本库HarmonyOS侧实现依赖@react-native-oh-tpl/lottie-react-native、@react-native-oh-tpl/async-storage的原生端代码，如已在HarmonyOS工程中引入过该库，则无需再次引入，可跳过本章步骤，直接使用。 + +如未引入请参考[@react-native-oh-tpl/lottie-react-native文档的link章节](/zh-cn/lottie-react-native.md#link)、[@react-native-oh-tpl/async-storage文档的link章节](/zh-cn/react-native-async-storage-async-storage.md#link)进行引入 + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-spring-scrollview": "file:../../node_modules/@react-native-oh-tpl/react-native-spring-scrollview/harmony/spring_scrollview.har", + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.配置 CMakeLists 和引入 SpringScrollViewPackge + +打开 `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-oh-tpl/react-native-spring-scrollview/src/main/cpp" ./spring_scrollview) +# 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_spring_scrollview) +# 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 "SpringScrollViewPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 SpringScrollViewPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import {SpringScrollViewPackage} from '@react-native-oh-tpl/react-native-spring-scrollview/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SpringScrollViewPackage(ctx), + ]; +} +``` + +### 5.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-spring-scrollview Releases](https://github.com/react-native-oh-library/react-native-spring-scrollview/releases) + + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| contentStyle | set content style | ViewStyle | no | iOS/Android | yes | +| bounces | Bounces if the content offset is out of the content view. It won't be bounces on the horizontal direction if the content view is not wider than the wrapper view although bounces is true. But it will on the vertical direction. | boolean | no | iOS/Android | yes | +| scrollEnabled | scrollEnabled | boolean | no | iOS/Android | yes | +| directionalLockEnabled | When true, the SpringScrollView will try to lock to only vertical or horizontal scrolling while dragging. | boolean | no | iOS/Android | yes | +| initialContentOffset | initial content offset. Only works when initiation. | Offset | no | iOS/Android | yes | +| showsVerticalScrollIndicator | showsVerticalScrollIndicator | boolean | no | iOS/Android | no | +| showsHorizontalScrollIndicator | showsHorizontalScrollIndicator | boolean | no | iOS/Android | no | +| refreshHeader | refresh header | React.ComponentClass | no | iOS/Android | yes | +| loadingFooter | loading header | React.ComponentClass | no | iOS/Android | yes | +| onRefresh | he callback when refreshing. When this props is configured, a refresh header will be add on the top of the SpringScrollView | ()=>any | no | iOS/Android | yes | +| onLoading() | The callback of loading. If set this prop, a loading footer will add to the botom of the SpringScrollView | ()=>any | no | iOS/Android | yes | +| allLoaded | Whether the data is all loaded. | boolean | no | iOS/Android | yes | +| textInputRefs | text input | any[] | no | iOS/Android | yes | +| inverted | inverted. It is a service for LargeList. | boolean | no | iOS/Android | yes | +| inputToolBarHeight | set height of the input toolbar | number | no | iOS/Android | yes | +| dragToHideKeyboard | hide the currently displayed keyboard | boolean | no | iOS/Android | yes | +| onTouchBegin() | begin touch | ()=>any | no | iOS/Android | yes | +| onTouchEnd() | touch finished | ()=>any | no | iOS/Android | yes | +| beginRefresh() | If you want to begin refreshing programally without finger draging, call this method after initialized. | Promise | no | iOS/Android | yes | +| endRefresh() | End the refreshing status. | void | no | iOS/Android | yes | +| endLoading() | End the loading status. | void | no | iOS/Android | yes | +| scrollTo() | animate scroll to a specific position | Promise | no | iOS/Android | yes | +| scroll() | scroll animation to a specific position | Promise | no | iOS/Android | yes | +| scrollToBegin() | scroll begin | Promise | no | iOS/Android | yes | +| scrollToEnd() | scroll end | Promise | no | iOS/Android | yes | +| onScroll() | scroll | (evt: ScrollEvent) => any | no | iOS/Android | yes | +| onNativeContentOffsetExtract | calculate content offset | NativeContentOffset | no | iOS/Android | yes | +| onScrollBeginDrag() | an event that is triggered when the user starts dragging (scrolling) content. | ()=>any | no | iOS/Android | yes | +| onMomentumScrollBegin() | When the user scrolls content and the momentum scroll animation begins, it triggers an event. | ()=>any | no | iOS/Android | yes | +| onMomentumScrollEnd() | When the user scrolls content and the momentum scroll animation ends, it triggers an event. | ()=>any | no | iOS/Android | yes | +| onSizeChange | The callback when the wrapper view size changed. | (size: Size) => any | no | iOS/Android | yes | +| onContentSizeChange | The callback when the content view size changed. | (size: Size) => any | no | iOS/Android | yes | + +## 遗留问题 + +- [ ] showsVerticalScrollIndicator属性harmony暂不支持[issue#3](https://github.com/react-native-oh-library/react-native-spring-scrollview/issues/3) +- [ ] showsHorizontalScrollIndicator属性harmony暂不支持[issue#4](https://github.com/react-native-oh-library/react-native-spring-scrollview/issues/4) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/LICENSE) ，请自由地享受和参与开源。