recyclerlistview.md

模板版本：v0.2.2

recyclerlistview

[!TIP] Github 地址

安装与使用

进入到工程目录并输入以下命令：

npm

npm install recyclerlistview@4.2.0

yarn

yarn add recyclerlistview@4.2.0

下面的代码展示了这个库的基本使用场景：

import React, {useState} from 'react';
import {View, Dimensions, Alert, Text} from 'react-native';
import {RecyclerListView, DataProvider} from 'recyclerlistview';
import {LayoutProvider} from 'recyclerlistview';

const ViewTypes = {
  FIRST: 0,
  SECOND: 1,
  THIRD: 2,
};

class LayoutUtil {
  static getWindowWidth() {
    // To deal with precision issues on android
    return Math.round(Dimensions.get('window').width * 1000) / 1000 - 6; //Adjustment for margin given to RLV;
  }
  static getLayoutProvider(type) {
    return new LayoutProvider(
      index => {
        if (index % 3 === 0) {
          return ViewTypes.FIRST;
        } else if (index % 2 === 0) {
          return ViewTypes.SECOND;
        } else {
          return ViewTypes.THIRD;
        }
      },
      (type, dim, index) => {
        const columnWidth = LayoutUtil.getWindowWidth() / 3;
        if (index % 3 === 0) {
          dim.width = 3 * columnWidth;
          dim.height = 150;
        } else if (index % 2 === 0) {
          dim.width = 2 * columnWidth;
          dim.height = 100;
        } else {
          dim.width = columnWidth;
          dim.height = 100;
        }
      },
    );
  }
}

const generateArray = n => {
  let arr = new Array(n);
  for (let i = 0; i < n; i++) {
    arr[i] = i;
  }
  return arr;
};

export const RecyclerListViewBaseDemo = () => {
  let {width} = Dimensions.get('window');

  let dataProviderInit = new DataProvider((r1, r2) => {
    return r1 !== r2;
  });

  const [dataProvider, setDataProvider] = useState(
    dataProviderInit.cloneWithRows(generateArray(300)),
  );

  const rowRenderer = (type, data) => {
    switch (type) {
      case ViewTypes.FIRST:
        return (
          <View style={styles.containerFirst}>
            <Text style={styles.centerText}>{data}</Text>
          </View>
        );
      case ViewTypes.SECOND:
        return (
          <View style={styles.containerSecond}>
            <Text style={styles.centerText}>{data}</Text>
          </View>
        );
      case ViewTypes.THIRD:
        return (
          <View style={styles.containerThree}>
            <Text style={styles.centerText}>{data}</Text>
          </View>
        );
      default:
        return null;
    }
  };

  return (
    <RecyclerListView
      layoutProvider={LayoutUtil.getLayoutProvider(0)}
      dataProvider={dataProvider}
      rowRenderer={rowRenderer}
    />
  );
};

export default RecyclerListViewBaseDemo;

const styles = {
  containerFirst: {
    justifyContent: 'space-around',
    alignItems: 'center',
    flex: 1,
    backgroundColor: '#00a1f1',
  },
  containerSecond: {
    justifyContent: 'space-around',
    alignItems: 'center',
    flex: 1,
    backgroundColor: '#ffbb00',
  },
  containerThree: {
    justifyContent: 'space-around',
    alignItems: 'center',
    flex: 1,
    backgroundColor: '#7cbb00',
  },
  centerText: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#000000',
  },
};

约束与限制

兼容性

本文档内容基于以下版本验证通过：

1. RNOH：0.72.26; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.25;
2. RNOH：0.72.29; SDK：HarmonyOS NEXT Developer Beta6; IDE：DevEco Studio 5.0.3.706; ROM：3.0.0.61;
3. 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;

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Name	Description	Type	Required	Platform	HarmonyOS Support
layoutProvider	Constructor function that defines the layout (height / width) of each element	BaseLayoutProvider	Yes	iOS Android	Yes
dataProvider	Constructor function the defines the data for each element	DataProvider	Yes	iOS Android	Yes
contextProvider	Used to maintain scroll position in case view gets destroyed, which often happens with back navigation	ContextProvider	No	iOS Android	Yes
rowRenderer	Method that returns react component to be rendered. You get the type, data, index and extendedState of the view in the callback	function	Yes	iOS Android	Yes
initialOffset	Initial offset you want to start rendering from; This is very useful if you want to maintain scroll context across pages.	number	No	iOS Android	Yes
renderAheadOffset	specify how many pixels in advance you want views to be rendered. Increasing this value can help reduce blanks (if any).However, keeping this as low as possible .should be the intent Higher values also . increase re-render compute	number	No	iOS Android	Yes
isHorizontal	If true, the list will operate horizontally .rather than vertically	boolean	No	iOS Android	Yes
onScroll	On scroll callback function that executes. as a user scrolls	function	No	iOS Android	Yes
onRecreate	callback function that gets executed. when recreating the recycler view from context provider	function	No	iOS Android	Yes
externalScrollView	Use this to pass your on implementation of BaseScrollView	{ new (props: ScrollViewDefaultProps): BaseScrollView }	No	iOS Android	Yes
onEndReached	Callback function executed when the end of the view is hit (minus onEndThreshold if defined)	function	No	iOS Android	Yes
onEndReachedThreshold	Specify how many pixels in advance for the onEndReached callback	number	No	iOS Android	Yes
onEndReachedThresholdRelative	Specify how far from the end (in units of visible length of the list) the bottom edge of the list must be from theend of the content to trigger the onEndReached callback	number	No	iOS Android	Yes
onVisibleIndicesChanged	Provides visible index; helpful in sending impression events	TOnItemStatusChanged	No	iOS Android	Yes
renderFooter	Provide this method if you want to render a footer. Helpful in showing a loader while doing incremental loads	function	No	iOS Android	Yes
initialRenderIndex	Specify the initial item index you want rendering to start from. Preferred over initialOffset if both specified	number	No	iOS Android	Yes
scrollThrottle	iOS only; Scroll throttle duration	number	No	iOS	No
canChangeSize	Specify if size can change	boolean	No	iOS Android	Yes
applyWindowCorrection	(Enhancement/replacement to distanceFromWindow API) Allows updation of the visible windowBounds to based on correctional values passed. User can specify windowShift; in case entire RecyclerListWindow needs to shift down/up, startCorrection; in case when top window bound needs to be shifted for e.x. top window bound to be shifted down is a content overlapping the top edge of RecyclerListView, endCorrection: to alter bottom window bound for a similar use-case.	function	No	iOS Android	Yes
disableRecycling	Turns off recycling	boolean	No	iOS Android	Yes
forceNonDeterministicRendering	Default is false; if enabled dimensions provided in layout provider will not be strictly enforced. Use this if item dimensions cannot be accurately determined	boolean	No	iOS Android	Yes
extendedState	In some cases the data passed at row level may not contain all the info that the item depends upon,you can keep all other info outside and pass it down via this prop. Changing this object willcause everything to re-render. Make sureyou don't change it often to ensure performance. Re-renders are heavy.	object	No	iOS Android	Yes
itemAnimator	Enables animating RecyclerListView item cells (shift, add, remove, etc)	ItemAnimator	No	iOS Android	Yes
style	To pass down style to inner ScrollView	object	No	iOS Android	Yes
scrollViewProps	For all props that need to be proxied to inner/external scrollview. Put them in an object and they'll be spread and passed down.	object	No	iOS Android	Yes
layoutSize	Will prevent the initial empty render required to compute the size of the listview and use these dimensions to render list items in the first render itself. This is useful for cases such as server side rendering. The prop canChangeSize has to be set to true if the size can be changed after rendering. Note that this is not the scroll view size and is used solely for layouting.	Dimension	No	iOS Android	Yes
onItemLayout	A callback function that is executed when an item of the recyclerListView (at an index) has been layout. This can also be used as a proxy to itemsRendered kind of callbacks.	number	No	iOS Android	Yes
windowCorrectionConfig	Used to specify is window correction config and whether it should be applied to some scroll events	object	No	iOS Android	Yes

遗留问题

• 接口scrollThrottle不支持: issue#785

其他

开源协议

本项目基于 Apache License 2.0 ，请自由地享受和参与开源。