14 Star 108 Fork 308

react-native-oh-library/usage-docs

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
.gitee
.idea
en
js
NativeBase.md
Parse-SDK-JS.md
README_EN.md
Shopify-restyle.md
_coverpage.md
_navbar.md
_sidebar.md
ant-design-react-native.md
bam-tech-react-native-image-resizer.md
baronha-ting.md
callstack-react-theme-provider.md
capi-architecture.md
codegen.md
contribute.md
flipper-plugin-react-navigation.md
freakycoder-react-native-bounceable.md
galio-framework.md
gorhom-bottom-sheet.md
jpush-react-native.md
klarna-platform-colors.md
link-source-code.md
lottie-react-native.md
mixpanel-react-native.md
model-gitee.md
model.md
nativewind.md
op-engineering-op-sqlite.md
openspacelabs-react-native-zoomable-view.md
patch.md
react-content-loader.md
react-countdown-circle-timer.md
react-native-MJRefresh.md
react-native-QRCode.md
react-native-SmartRefreshLayout.md
react-native-action-button.md
react-native-action-sheet.md
react-native-alipay.md
react-native-amap-geolocation.md
react-native-amap3d.md
react-native-animatable.md
react-native-animate-number.md
react-native-apple-authentication.md
react-native-aria.md
react-native-async-storage-async-storage.md
react-native-audio-recorder-player.md
react-native-audio-toolkit.md
react-native-audio.md
react-native-autoLink.md
react-native-autocomplete-dropdown.md
react-native-autocomplete-input.md
react-native-autoheight-webview.md
react-native-awesome-gallery.md
react-native-background-fetch.md
react-native-background-timer.md
react-native-baidu-map.md
react-native-barcode-builder.md
react-native-bars.md
react-native-base64.md
react-native-better-banner.md
react-native-bindingx.md
react-native-ble-manager.md
react-native-ble-plx.md
react-native-blob-util.md
react-native-blob-util(nocodegen).md
react-native-blurhash.md
react-native-bootsplash.md
react-native-bouncy-checkbox.md
react-native-button.md
react-native-calendar-events.md
react-native-calendars.md
react-native-callkeep.md
react-native-camera-kit.md
react-native-cameraroll(nocodegen) .md
react-native-cameraroll.md
react-native-canvas.md
react-native-cardview.md
react-native-chart-kit.md
react-native-charts-wrapper.md
react-native-check-box.md
react-native-clipboard-clipboard.md
react-native-clippath-capi.md
react-native-clippathview.md
react-native-code-push.md
react-native-collapsible.md
react-native-color-matrix-image-filters.md
react-native-communications.md
react-native-community-blur.md
react-native-community-checkbox.md
react-native-community-datetimepicker.md
react-native-community-geolocation.md
react-native-community-hooks.md
react-native-community-netinfo.md
react-native-community-progress-bar-android.md
react-native-community-progress-view-capi.md
react-native-community-progress-view.md
react-native-community-push-notification-ios.md
react-native-community-segmented-control.md
react-native-community-slider.md
react-native-community-toolbar-android.md
react-native-compass-heading.md
react-native-confetti-cannon.md
react-native-config.md
react-native-confirmation-code-field.md
react-native-contacts.md
react-native-context-menu-view.md
react-native-cookies-cookies.md
react-native-copilot.md
react-native-country-picker-modal.md
react-native-create-thumbnail.md
react-native-credit-card-input.md
react-native-crypto-js.md
react-native-crypto.md
react-native-custom-keyboard.md
react-native-date-picker(nocodegen).md
react-native-date-picker.md
react-native-deck-swiper.md
react-native-default-preference.md
react-native-device-info.md
react-native-dismiss-keyboard.md
react-native-doc-viewer.md
react-native-document-picker.md
react-native-dotenv.md
react-native-drag-sort.md
react-native-drawer-layout-polyfill.md
react-native-drax.md
react-native-drop-shadow.md
react-native-dropdown-picker.md
react-native-dropdownalert.md
react-native-dynamic.md
react-native-easy-grid.md
react-native-easy-toast.md
react-native-echarts-pro.md
react-native-element-dropdown.md
react-native-elements.md
react-native-email-link.md
react-native-error-boundary.md
react-native-exception-handler.md
react-native-exit-app.md
react-native-ezswiper.md
react-native-fast-image.md
react-native-feather.md
react-native-file-access.md
react-native-file-selector.md
react-native-file-viewer.md
react-native-fileupload.md
react-native-fingerprint-scanner.md
react-native-fit-Image.md
react-native-flash-message.md
react-native-flexi-radio-button.md
react-native-flip-card.md
react-native-fs(nocodegen).md
react-native-fs.md
react-native-gesture-handler.md
react-native-get-random-values.md
react-native-gifted-charts.md
react-native-gifted-chat.md
react-native-graph.md
react-native-haptic-feedback.md
react-native-harmony-sample-package.md
react-native-hole-view.md
react-native-htmlview.md
react-native-http-bridge.md
react-native-hyperlink.md
react-native-iconfont-cli.md
react-native-idfa-aaid.md
react-native-idle-timer.md
react-native-image-capinsets-next.md
react-native-image-colors.md
react-native-image-crop-picker(nocodegen).md
react-native-image-crop-picker.md
react-native-image-editor.md
react-native-image-gallery.md
react-native-image-header-scroll-view.md
react-native-image-marker.md
react-native-image-pan-zoom.md
react-native-image-picker.md
react-native-image-rotate.md
react-native-image-sequence-2.md
react-native-image-viewing.md
react-native-image-zoom-viewer.md
react-native-inappbrowser.md
react-native-incall-manager.md
react-native-indicators.md
react-native-input-scroll-view.md
react-native-intersection-observer.md
react-native-iphone-screen-helper.md
react-native-json-tree.md
react-native-keep-awake.md
react-native-keyboard-accessory.md
react-native-keyboard-aware-scroll-view.md
react-native-keyboard-controller.md
react-native-keys.md
react-native-largelist.md
react-native-lightbox.md
react-native-linear-gradient-text.md
react-native-linear-gradient.md
react-native-loading-spinner-overlay.md
react-native-localization-settings.md
react-native-localization.md
react-native-localize.md
react-native-mail.md
react-native-map-clustering.md
react-native-map-linking.md
react-native-maps-directions.md
react-native-maps.md
react-native-markdown-display.md
react-native-markdown-renderer.md
react-native-marquee-ab.md
react-native-marquee.md
react-native-mask-text.md
react-native-masked-text.md
react-native-masked-view-masked-view.md
react-native-material-buttons.md
react-native-material-design-styles.md
react-native-material-dropdown.md
react-native-material-menu.md
react-native-material-ripple.md
react-native-material-textfield.md
react-native-material-ui.md
react-native-md5.md
react-native-mlkit-ocr.md
react-native-mmkv-storage.md
react-native-modal-popover.md
react-native-modal.md
react-native-modalbox.md
react-native-modals.md
react-native-mqtt.md
react-native-multi-slider.md
react-native-multiple-select.md
react-native-neomorph-shadows.md
react-native-nested-scroll-view.md
react-native-nested-scroll.md
react-native-network-info.md
react-native-nfc-manager.md
react-native-notifier.md
react-native-offline.md
react-native-oh-tpl-react-native-screens.md
react-native-ohos-community-auto-fill.md
react-native-orientation-locker.md
react-native-orientation.md
react-native-pager-view.md
react-native-paper.md
react-native-parsed-text.md
react-native-pdf.md
react-native-performance.md
react-native-permissions.md
react-native-phone-number-input.md
react-native-picker-picker(nocodegen).md
react-native-picker-picker.md
react-native-picker-select.md
react-native-picker.md
react-native-pickers.md
react-native-popover-view.md
react-native-popup-menu.md
react-native-print.md
react-native-progress.md
react-native-pull.md
react-native-qr-decode-image-camera.md
react-native-qrcode-svg.md
react-native-quick-base64.md
react-native-randombytes.md
react-native-ratings.md
react-native-reanimated-bottom-sheet.md
react-native-reanimated-carousel.md
react-native-reanimated-table.md
react-native-reanimated.md
react-native-recaptcha-that-works.md
react-native-reconnecting-websocket.md
react-native-redash.md
react-native-render-html.md
react-native-responsive-fontsize.md
react-native-restart.md
react-native-root-modal.md
react-native-root-siblings.md
react-native-root-toast.md
react-native-safe-area-context.md
react-native-safe-module.md
react-native-safe-modules.md
react-native-screens.md
react-native-screenshot-prevent.md
react-native-scroll-bottom-sheet.md
react-native-scrollable-tab-view.md
react-native-scrollable-tabview.md
react-native-search-bar.md
react-native-secharts.md
react-native-section-list-get-item-layout.md
react-native-securerandom.md
react-native-send-intent.md
react-native-sensitive-info.md
react-native-sensors.md
react-native-shadow-2.md
react-native-shake.md
react-native-share.md
react-native-shared-element.md
react-native-shimmer-placeholder.md
react-native-signature-canvas.md
react-native-signature-capture.md
react-native-simple-toast.md
react-native-size-matters.md
react-native-skia.md
react-native-slider.md
react-native-snackbar.md
react-native-snap-carousel.md
react-native-sortable-list.md
react-native-sound.md
react-native-spinkit.md
react-native-splash-screen.md
react-native-spring-scrollview.md
react-native-sqlite-storage.md
react-native-ssl-pinning.md
react-native-step-indicator.md
react-native-sticky-parallax-header.md
react-native-stickyheader.md
react-native-storage.md
react-native-svg-capi.md
react-native-svg-charts.md
react-native-svg.md
react-native-swipe-gestures.md
react-native-swipe-list-view.md
react-native-swipeable-list.md
react-native-swiper.md
react-native-switch-pro.md
react-native-switch-selector.md
react-native-switch.md
react-native-syan-image-picker.md
react-native-system-setting.md
react-native-tab-navigator.md
react-native-tab-view.md
react-native-tcp-socket.md
react-native-testing-library.md
react-native-text-gradient.md
react-native-text-input-mask.md
react-native-text-size.md
react-native-textinput-maxlength-fixed.md
react-native-theme-control.md
react-native-theme-switch-animation.md
react-native-thumbnail.md
react-native-touch-id.md
react-native-track-player.md
react-native-transitiongroup.md
react-native-translucent-modal.md
react-native-tts.md
react-native-typing-animation.md
react-native-typography.md
react-native-udp.md
react-native-ui-lib.md
react-native-unistyles.md
react-native-url-polyfill.md
react-native-user-agent.md
react-native-vconsole.md
react-native-vector-drawable.md
react-native-vector-icons.md
react-native-version-number.md
react-native-video-cache.md
react-native-video-controls.md
react-native-video.md
react-native-view-overflow.md
react-native-view-pdf.md
react-native-view-shot.md
react-native-vision-camera.md
react-native-voice-voice.md
react-native-walkthrough-tooltip.md
react-native-waterfall-flow.md
react-native-waterflow-list.md
react-native-webview(nocodegen).md
react-native-webview.md
react-native-wechat-lib.md
react-native-worklets-core.md
react-native-zip-archive.md
react-navigation-bottom-sheet.md
react-navigation-bottom-tabs.md
react-navigation-core.md
react-navigation-devtools.md
react-navigation-drawer.md
react-navigation-elements.md
react-navigation-header-buttons.md
react-navigation-material-bottom-tabs.md
react-navigation-material-top-tabs.md
react-navigation-native-stack.md
react-navigation-native.md
react-navigation-routers.md
react-navigation-shared-element.md
react-navigation-stack.md
react-navigation.md
react-subscribe.md
realm-js.md
reanimated-props-backup.md
reassure.md
recyclerlistview.md
remobile-react-native-toast.md
rn-bugly.md
rn-emoji-keyboard.md
rn-placeholder.md
rn-sliding-up-panel.md
rn-tourguide.md
sentry-react-native.md
shopify-flash-list.md
tgz-usage-en.md
usage-docs-checklist.md
victory-native-xl.md
img
zh-cn
.nojekyll
LICENSE
Menu.xlsx
README.md
_404.md
_coverpage.md
_navbar.md
_sidebar.md
index.html
克隆/下载
react-native-largelist.md 22.94 KB
一键复制 编辑 原始数据 按行查看 历史

Template version: v0.2.2

react-native-largelist

Supported platforms License

[!TIP] Github address

Installation and Usage

Find the matching version information in the release address of a third-party library: @react-native-oh-tpl/react-native-largelist Releases.For older versions that are not published to npm, please refer to the installation guide to install the tgz package.

Go to the project directory and execute the following instruction:

npm

npm install @react-native-oh-tpl/react-native-largelist

yarn

yarn add @react-native-oh-tpl/react-native-largelist

The following code shows the basic use scenario of the repository:

[!WARNING] The name of the imported repository remains unchanged.

// Largelist
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { LargeList } from "react-native-largelist";

export class HeightEqualExample extends React.Component {
  _sectionCount = 10;
  _rowCount = 10;

  render() {
    const data = [];
    for (let section = 0; section < this._sectionCount; ++section) {
      const sContent = { items: [] };
      for (let row = 0; row < this._rowCount; ++row) {
        sContent.items.push(row);
      }
      data.push(sContent);
    }
    return (
      <LargeList
        style={styles.container}
        data={data}
        heightForSection={() => 50}
        renderSection={this._renderSection}
        heightForIndexPath={() => 50}
        renderIndexPath={this._renderIndexPath}
      />
    );
  }

  _renderSection = (section: number) => {
    return (
      <View style={styles.section}>
        <Text>
          Section {section}
        </Text>
      </View>
    );
  };

  _renderIndexPath = ({ section: section, row: row }) => {
    return (
      <View style={styles.row}>
        <Text>
          Section {section} Row {row}
        </Text>
        <View style={styles.line} />
      </View>
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  section: {
    flex: 1,
    backgroundColor: "gray",
    justifyContent: "center",
    alignItems: "center"
  },
  row: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  line: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    height: 1,
    backgroundColor: "#EEE"
  }
});

For more examples, see largelistExample

Link

The implementation of this library depends on the native code of @react-native-oh-tpl/react-native-spring-scrollview . 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/react-native-spring-scrollview

Running

Click the sync button in the upper right corner.

Alternatively, run the following instruction on the terminal:

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-largelist 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.

Largelist:

Name Description Type Required Platform HarmonyOS Support
bounces 滑动超出内容视图后是否可以弹性地继续滑动(iOS & Android,如果为true,水平方向内容视图如果没有超过SpringScrollView则不会有弹性,垂直方向始终具有弹性) boolean no Android/iOS yes
scrollEnabled 是否可以滚动 boolean no Android/iOS yes
initialContentOffset 初始化偏移,仅第一次初始化有效,后期更改无效(已支持x方向) {x:number, y:number} no Android/iOS yes
showsVerticalScrollIndicator 显示垂直滚动指示器 boolean no Android/iOS no
showsHorizontalScrollIndicator 显示水平滚动指示器(内容视图超出LargeList视口才有用) boolean no Android/iOS no
tapToHideKeyboard 点击LargeList是否收起键盘 boolean no Android/iOS yes(rely on springscrollview 2.x version)
data 列表的数据源 { items: any[] }[] no Android/iOS yes
heightForSection 返回列表每一组组头高度的函数 (section: number) => number no Android/iOS yes
renderSection 每一组组头的render函数 (section: number) => React.ReactElement <any> no Android/iOS yes
heightForIndexPath 返回列表每一行高度的函数 (indexPath: IndexPath) => number no Android/iOS yes
renderIndexPath 每一行的render函数, mediaWrapperParam是用于大图片或视频优化选项。 (indexPath: IndexPath, mediaWrapperParam:Object) => React.ReactElement <any> no Android/iOS yes
renderHeader 列表的头部组件函数 ()=> React.ReactElement <any> no Android/iOS yes
renderFooter 列表的尾部组件函数 ()=> React.ReactElement <any> no Android/iOS yes
inverted 翻转滚动方向,适配聊天App boolean no Android/iOS yes
onRefresh 下拉刷新的回调函数,如果设置了此属性,则会在顶部加一个刷新Header ()=>any no Android/iOS yes
refreshHeader 选择下拉刷新的组件,用户如果不希望高度自定义,则可以不设定直接使用NormalHeader,如果需要高度自定义 RefreshHeader no Android/iOS yes
onLoading 上拉加载的回调函数,如果设置了此属性,则会在底部加一个加载组件 ()=>any no Android/iOS yes
allLoaded 数据是否加载完成。 boolean no Android/iOS yes
loadingFooter 上拉加载组件,用户如果不希望自定义,则可以使用NormalFooter,如果需要高度自定义 LoadingFooter no Android/iOS yes
onScroll 监听列表滑动(JavaScript端) ({nativeEvent:{contentOffset:{x, y}}})=>any no Android/iOS yes
onNativeContentOffsetExtract 使用原生动画值监听滑动偏移,可以用作插值动画 {x?:Animated.Value, y?:Animated.Value} no Android/iOS yes
onTouchBegin 手指按下时回调 ()=>any no Android/iOS yes
onTouchEnd 手指抬起时回调 ()=>any no Android/iOS yes
onMomentumScrollBegin 松手后减速开始的回调 ()=>any no Android/iOS yes
onMomentumScrollEnd 减速结束回调 ()=>any no Android/iOS yes
textInputRefs 将TextInput的引用传入,让SpringScrollView自动管理键盘遮挡问题。 TextInput[] no Android/iOS yes
dragToHideKeyboard 滑动屏幕时是否隐藏键盘 boolean no Android/iOS yes(rely on springscrollview 3.x version)
inputToolBarHeight 不同的系统,不同的三方输入法,键盘的工具栏高度是不确定的,并且官方没有给出获取工具栏高度的办法,这个属性用以给用户小幅调整键盘弹起时,组件偏移的位置 number no Android/iOS yes
groupCount 优化参数,LargeList将各行进行分组(不是Section,这个视独立的组),groupCount表示总共渲染4组,每组至少渲染groupMinHeight高度,值越大预渲染的行数越多,对应的初始化越慢。请注意groupCount * groupMinHeight必须大于LargeList的视口高度。 number no Android/iOS yes
groupMinHeight 优化参数,每组的高度 number no Android/iOS yes
updateTimeInterval 更新延时,值越小请求更新的频率越高,但是React Native是异步的,请求更新过多会导致更新不过来;值越大越容易让用户看到新的Item替换旧的Item的现象。 number no Android/iOS yes

WaterfallList:

Name Description Type Required Platform HarmonyOS Support
data 数据源,数组的个数决定了Item的数量 any[] no Android/iOS yes
heightForItem 一个高度函数,用以返回每个Item的高度 (item:any,index:number)=> number no Android/iOS yes
renderItem 每个Item的render函数 (item:any,index:number)=> React.ReactElement<any> no Android/iOS yes
preferColumnWidth 每个Item的理想宽度, 它会影响实际列数,实际列数等于WaterfallList除以理想宽度向下取整,实际宽度是组件宽度除以实际列数(目前只支持等宽的Item).(preferColumnWidth 和 numColumns 至少需要指定一个. ) number no Android/iOS yes
numColumns 固定列数. (preferColumnWidth 和 numColumns 至少需要指定一个. ) number no Android/iOS yes
renderHeader 头部组件函数 ()=> React.ReactElement <any> no Android/iOS yes
renderFooter 尾部组件函数 ()=> React.ReactElement <any> no Android/iOS yes

StickyForm:

Name Description Type Required Platform HarmonyOS Support
...LargeList 支持所有的LargeList属性(含刷新及加载)。 - no Android/iOS yes
directionalLockEnabled 当此属性为true时,它会试着锁定只在水平或垂直一个方向上滚动。 boolean no Android/iOS no
headerStickyEnabled 将头部吸在StickForm的顶部,Section跟着吸在头部的下边。 boolean no Android/iOS no

Known Issues

Others

License

This project is licensed under The MIT License (MIT).

Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/react-native-oh-library/usage-docs.git
git@gitee.com:react-native-oh-library/usage-docs.git
react-native-oh-library
usage-docs
usage-docs
master

搜索帮助