Template version: v0.2.2
react-native-largelist
[!TIP] Github address
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 install @react-native-oh-tpl/react-native-largelist
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
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
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.
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
[!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 |
---|---|---|---|---|---|
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 |
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 |
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 |
This project is licensed under The MIT License (MIT).
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。