recyclerlistviewのサンプルコードが下記にあります。
今回はそのコードを理解しながら追ってみることとします。ちなみに、これはクラス型コンポーネントで記載されているので、機能型コンポーネントに訳しながら記載しつつ解説していきます。最終的には、並び替え機能の実装をめざします。
まず、はじめに、props.childrenというものが出てきます。
【React】値の受け渡し Propsとchildren #初心者 - Qiita
CellContainerの定義までのところは下記のようになります。
const ViewTypes = {
FULL: 0,
HALF_LEFT: 1,
HALF_RIGHT: 2
};
let containerCount = 0;
function CellContainer(props){
const _containerId = containerCount++;
return <View {...props}>{props.children}<Text>Cell Id: {_containerId}</Text></View>;
}
<View {...props}>という書き方も気にはなりますが、今は後回しとします。
下が完成版です。
/***
Use this component inside your React Native Application.
A scrollable list with different item type
*/
import React, { Component } from "react";
import { useState } from 'react';
import { View, Text, Dimensions } from "react-native";
import { RecyclerListView, DataProvider, LayoutProvider } from "recyclerlistview";
const ViewTypes = {
FULL: 0,
HALF_LEFT: 1,
HALF_RIGHT: 2
};
let containerCount = 0;
function CellContainer(props){
const _containerId = containerCount++;
return <View {...props}>{props.children}<Text>Cell Id: {_containerId}</Text></View>;
}
/***
* To test out just copy this component and render in you root component
*/
export default function App(){
const { width } = Dimensions.get("window");
//Create the data provider and provide method which takes in two rows of data and return if those two are different or not.
//THIS IS VERY IMPORTANT, FORGET PERFORMANCE IF THIS IS MESSED UP
let dataProvider = new DataProvider((r1, r2) => {
return r1 !== r2;
});
//Create the layout provider
//First method: Given an index return the type of item e.g ListItemType1, ListItemType2 in case you have variety of items in your list/grid
//Second: Given a type and object set the exact height and width for that type on given object, if you're using non deterministic rendering provide close estimates
//If you need data based check you can access your data provider here
//You'll need data in most cases, we don't provide it by default to enable things like data virtualization in the future
//NOTE: For complex lists LayoutProvider will also be complex it would then make sense to move it to a different file
const _layoutProvider = new LayoutProvider(
index => {
if (index % 3 === 0) {
return ViewTypes.FULL;
} else if (index % 3 === 1) {
return ViewTypes.HALF_LEFT;
} else {
return ViewTypes.HALF_RIGHT;
}
},
(type, dim) => {
switch (type) {
case ViewTypes.HALF_LEFT:
dim.width = width / 2;
dim.height = 160;
break;
case ViewTypes.HALF_RIGHT:
dim.width = width / 2;
dim.height = 160;
break;
case ViewTypes.FULL:
dim.width = width;
dim.height = 140;
break;
default:
dim.width = 0;
dim.height = 0;
}
}
);
const _generateArray = (n) => {
let arr = new Array(n);
for (let i = 0; i < n; i++) {
arr[i] = i;
}
return arr;
}
//Given type and data return the view component
const _rowRenderer = (type, data) =>{
//You can return any view here, CellContainer has no special significance
switch (type) {
case ViewTypes.HALF_LEFT:
return (
<CellContainer style={styles.containerGridLeft}>
<Text>Data: {data}</Text>
</CellContainer>
);
case ViewTypes.HALF_RIGHT:
return (
<CellContainer style={styles.containerGridRight}>
<Text>Data: {data}</Text>
</CellContainer>
);
case ViewTypes.FULL:
return (
<CellContainer style={styles.container}>
<Text>Data: {data}</Text>
</CellContainer>
);
default:
return null;
}
}
const [dataProviderState,setDataProvider] = useState(dataProvider.cloneWithRows(_generateArray(300)));
return <RecyclerListView layoutProvider={_layoutProvider} dataProvider={dataProviderState} rowRenderer={_rowRenderer} />;
}
const styles = {
container: {
justifyContent: "space-around",
alignItems: "center",
backgroundColor: "#00a1f1"
},
containerGridLeft: {
justifyContent: "space-around",
alignItems: "center",
backgroundColor: "#ffbb00"
},
containerGridRight: {
justifyContent: "space-around",
alignItems: "center",
backgroundColor: "#7cbb00"
}
};
最近は、FlashListというのもあるようです。
https://snamiki1212.com/react-native-recycler-view-list/
